@use "../mixins" as *;
@use "../media" as *;

.auth {
    margin-top: 94px;

    &__inner {
        @include flex-center;

        padding-top: calc(var(--section-padding-y));
        padding-bottom: calc(var(--section-padding-y));
        flex-direction: column;

        @include mobile {
            padding-block: var(--section-padding-y);
        }
    }

    &__header {
        line-height: 100%;
        margin-bottom: 0.25em;
    }

    &__text {
        color: var(--color-dark-50);
        transition: color var(--transition-duration-03);

        @include tablet {
            @include fluid-text(18, 16, 1024);

            max-width: 540px;
        }
    }

    &__form {
        margin-top: 50px;
        max-width: 540px;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    &__remember {
        @include flex-center(space-between, true);
        @include fluid-text(18, 16, 540);

        margin: 10px 0 5px;
        min-width: 300px;
        flex-wrap: wrap;

        &-label {
            color: var(--color-dark-50);
            transition: color var(--transition-duration-03);
        }
    }

    &__reset-link {
        color: var(--color-dark-50);
        transition: color var(--transition-duration-03);

        @include hover {
            color: var(--color-dark-80)
        }
    }

    &__legal {
        @include fluid-text(18, 16, 540);

        color: var(--color-dark-50);
        margin-top: 10px;

        &-link {
            @include hover {
                color: var(--color-dark-80);
            }
        }
    }
}