.form {
    height: @auth-title-height;
    overflow: hidden;
    transition: height .3s ease-in-out;

    &__wrapper {

        &:not(:last-child) {
            border-bottom: 1px solid #333;
        }
    }

    &__toggle {
        display: none;

        &:checked ~ .form {
            height: @auth-form-height;
        }

        &:not(:checked) ~ .form .form__title:hover {
            cursor: pointer;
            background: #333;
            z-index: 100;
            box-shadow: 0 2px 5px fade(#111, 80%);
        }
    }

    &__title {
        font-size: 1.4em;
        display: block;
        padding: 10px;
        height: @auth-title-height;
        transition: background .2s, box-shadow .2s;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    &__content {
        display: flex;
        flex-direction: column;
        margin: 0 5px;
        height: @auth-form-height - @auth-title-height;
        overflow: hidden;
        transition: height .5s ease-in-out;
        align-items: center;
        flex-grow: 1;
        justify-content: center;

        &--no-registration {
            max-width: 400px;
        }
    }

    &__link {
        color: #88c;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }

        &:active {
            color: #c88;
        }
    }

    &__row {
        margin-bottom: 5px;
        width: 100%;

        &--columns {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    &__column {

        &--message {
            padding-left: 10px;
            color: #aaa;
        }

        &--error {
            color: #a33;
        }
    }
}