@mixin signup {
    &__title {
        margin-bottom: 56px;
        @include font("IntervalNextBook");
        font-size: em(32px);
        text-align: left;
        color: color('feedback', 'text');
    }

    &__step1,
    &__step2 {
        position: relative;
        width: 100%;
    }

    &__step1 {
        display: block;
    }

    &__step2 {
        display: none;
    }

    button {
        width: 100%;
        max-width: 100%;
    }

    input {
        @include input();
        width: 100%;
        max-width: 100%;
        height: 48px;
        margin-bottom: 8px;
        border: 2px solid color('borders');
        border-radius: 4px;
    }

    a {
        @include anchor();
    }

    &__button {
        @include font("IntervalNextReg");
        position: relative;
        width: 100%;
        height: 48px;
        margin-bottom: 16px;
        padding: 0 60px;
        border-radius: 2px;
        background-color: color('primary', 'highlight');
        font-size: em(20px);
        text-align: center;

        svg {
            position: absolute;
            display: block;
            height: 20px;
            top: 14px;
            left: 18px;
        }

        &--facebook {
            border: 0;
            background-color: color('buttons', 'facebook');
            color: color('primary', 'highlight');
            line-height: 15px;

            &:active {
                background-color: color('buttons', 'facebook-active');
            }

            &__small {
                @include font("IntervalNextBook");
                font-size: em(11px);
            }

            svg {
                fill: color('primary', 'highlight');
            }
        }

        &--google {
            color: color('google', 'text');
            border: 2px solid color('google', 'border');

            &:active {
                color: color('google', 'text-active');
                border: 2px solid color('google', 'border-active');
            }
        }

        &--email {
            margin-bottom: 116px;
            color: color('primary');
            border: 2px solid color('primary');

            svg {
                width: 23px;
                height: auto;
                top: 16px;
                fill: color('primary');
            }
        }
    }

    &__text {
        width: 100%;
        padding-bottom: 24px;
        margin-top: 18px;
        margin-bottom: 18px;
        font-size: em(14px);
        color: color('text', 'secondary');
        text-align: left;

        border-bottom: 1px solid #f0f1f3;
    }

    &__aux {
        width: 100%;
        @include font("IntervalNextBook");
        font-size: em(16px);
        text-align: left;
        color: color('text', 'secondary');

        a {
            margin-left: 8px;
            @include font("IntervalNextReg");
        }
    }

    &__divider {
        position: relative;
        width: 100%;
        height: 16px;
        margin: 0 0 15px 0;

        &:before {
            content: " ";
            position: absolute;
            display: block;
            width: 100%;
            height: 1px;
            top: 9px;
            left: 0;
            z-index: 1;
            background-color: #f0f1f3;
        }

        &__content {
            position: relative;
            display: table;
            margin: 0 auto;
            padding: 0 24px;
            opacity: .7;
            z-index: 2;
            background-color: color('primary', 'highlight');
            @include font("IntervalNextReg");
            font-size: em(16px);
            line-height: em(16px);
        }
    }

    &__alt-text {
        width: 100%;
        margin-top: 24px;
        margin-bottom: 24px;
        padding-bottom: 44px;
        text-align: center;
        border-bottom: 1px solid #f0f1f3;

        @include breakpoint(small) {
            padding-bottom: 24px;
        }
    }

    &--with-email &__step1 {
        display: none;
    }

    &--with-email &__step2 {
        display: block;
    }

    &--with-email {
        max-height: 535px;

        button {
            margin-top: 8px;
            margin-bottom: 36px;
        }
    }
}

@mixin login() {
    @include signup();

    [class*="--primary"] {
        margin-top: 8px;
    }
}