/*
 * Sets the default cursor the remove password link. The link doesn't use
 * the href attribute, so we need to set the  cursor manually.
 */
#inviteDialogRemovePassword {
    cursor: hand;
}

.invite-dialog {
    .dial-in-numbers {
        .dial-in-numbers-conference-id {
            color: orange;
            margin-left: 3px;
        }

        /*
         * dial-in-numbers-copy styling is needed for the feature of copying
         * text to the clipboard. The styling keeps the element invisible
         * to the user but still programmatically selectable for copying.
         */
        .dial-in-numbers-copy {
            opacity: 0;
            pointer-events: none;
            position: fixed;
            -webkit-user-select: text;
            user-select: text;
        }

        .dial-in-numbers-trigger {
            position: relative;
            width: 100%;

            .dial-in-numbers-trigger-icon {
                position: absolute;
                right: 10px;
                top: 4px;
            }
        }

        .is-disabled,
        .is-loading {
            .dial-in-numbers-trigger-icon {
                display: none;
            }
        }
    }

    .form-control {
        padding: 0;

        &__container {
            /**
             * Ensure contents display in a line and vertically centered.
             */
            align-items: center;

            button {
                font-size: $modalButtonFontSize;
            }
        }

        &__input-container {
            flex: 1;
            margin-right: 10px;
        }
    }

    .inviteLink {
        color: $readOnlyInputColor;
    }

    .lock-state {
        display: flex;
    }

    .password-overview {
        margin-top: 10px;

        .form-control {
            margin-top: 10px;
        }

        .password-overview-status,
        .remove-password {
            display: flex;
            justify-content: space-between;
        }

        .password-overview-toggle-edit,
        .remove-password-link {
            cursor: pointer;
            text-decoration: none;
        }

        .remove-password {
            margin-top: 15px;
        }
    }

    .remove-password-current {
        color: $inputControlEmColor;
    }
}