@layer reset, base, components;

@import url('fonts.css');
@import url('variables.css');
@import url('reset.css') layer(reset);
@import url('components.css') layer(components);

@layer base {
    html {
        font-family: 'Gilmer', sans-serif;
        font-size: var(--font-size);
        line-height: var(--line-height);
        color: var(--white);
        background-color: var(--dark);
    }

    *, &::before, &::after {
        transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition);
        outline-color: var(--blue);
        interpolate-size: allow-keywords; /* To animate height: auto */
    }
}

.page {
    padding: 180px var(--size-8) var(--size-17);

    @media (max-width: 1279px) {
        padding: var(--size-12) var(--size-6);
    }
}

.page__logo {
    position: absolute;
    top: var(--size-15);
    left: var(--size-12);
    display: block;
    width: 165px;
    background-size: cover;
    color: var(--white);

    @media (max-width: 1279px) {
        position: relative;
        inset: initial;
        width: 114px;
        margin-bottom: var(--size-20);
    }

    & > svg {
        width: 100%;
        height: auto;
        display: block;
    }

    &::before {
        /* Larger click/focus area */
        position: absolute;
        content: '';
        inset: calc(-1 * var(--size-2));
    }
}

.page__wrapper {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.page__content {
    display: flex;
    flex-direction: column;
    gap: var(--size-12);

    @media (max-width: 1279px) {
        gap: var(--size-8);
    }
}

.page__title {
    position: absolute;
    top: 0;
    left: -392px;
    font-size: 56px;
    color: var(--white);
    line-height: 1;
    font-weight: 700;
    max-width: 336px;

    @media (max-width: 1400px) {
        position: static;
        max-width: initial;
        padding: 0;
        margin-bottom: var(--size-9);
    }

    @media (max-width: 1279px) {
        font-size: 28px;
        line-height: 40px;
        margin-bottom: var(--size-4);
    }
}

.providers {
    display: flex;
    justify-content: space-between;
}

.forgot-password {
    display: block;
    margin-top: var(--size-4);
    text-align: right;
}

.footer {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-8);

    @media (max-width: 1279px) {
        gap: var(--size-4);
    }
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.password-requirements {
    margin-top: var(--size-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-2) var(--size-4);
    overflow: hidden;
    transition: var(--transition);

    @media (max-width: 1279px) {
        margin-top: var(--size-2);
        grid-template-columns: 1fr;
    }

    .input:has(input:is(:placeholder-shown,:valid)) ~ & {
        height: 0;
        opacity: 0;
    }

    .input:has(input:placeholder-shown) ~ & {
        margin-top: 0;
    }
}

.password-requirements__item {
    position: relative;
    padding-left: var(--size-5);
    font-size: 12px;
    line-height: 16px;
    color: var(--blue-gray);
    transition: color var(--transition);

    &.-valid {
        color: var(--success);
    }

    &::before,
    &::after {
        content: '';
        position: absolute;
        transition: var(--transition);
    }

    &::before {
        inset: 0;
        right: auto;
        margin: auto 0;
        border-radius: 50%;
        left: 5px;
        width: 6px;
        height: 6px;
        background-color: var(--charcoal-grey);
    }

    &::after {
        left: 0;
        width: var(--size-4);
        height: var(--size-4);
        background: url('../img/icons/checkmark.svg') no-repeat 4px center;
    }

    &.-valid::before,
    &:not(.-valid)::after {
        opacity: 0;
        transform: scale(0.7);
    }
}

.password-requirements__success {
    transition: var(--transition);

    .input:has(input:invalid) ~ & {
        height: 0;
        opacity: 0;
        transform: translateY(calc(-1 * var(--size-2)));
    }
}

.redirect {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.redirect__loader {
    width: var(--size-16);
    height: var(--size-16);
    animation: loader 0.8s infinite linear;
    background-image: var(--icon-loader-l);
    background-size: contain;
    /* Convert target hex color to filters here: https://angel-rs.github.io/css-color-filter-generator/ */
    filter: brightness(0) saturate(100%) invert(47%) sepia(29%) saturate(3226%) hue-rotate(202deg) brightness(105%) contrast(101%);
}

.redirect__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;

    margin-top: var(--size-6);
    margin-bottom: var(--size-4);
}