@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html, body {
        height: 100vh;
    }

    header {
        @apply tw-col-span-full tw-p-8 tw-grid tw-content-start tw-grid-cols-12 tw-space-y-4 tw-bg-primary-100 tw-text-antiFlashWhite tw-border-b-[2.5rem] tw-border-r-[2.5rem] tw-border-vistaBlue tw-rounded-br-[8rem] md:tw-rounded-br-[35.5rem];
        @apply lg:tw-col-start-1 lg:tw-col-end-6 lg:tw-pl-20 lg:tw-pr-12 lg:tw-pt-12 lg:tw-mr-10;
    }

    main {
        @apply tw-py-12 tw-px-8 tw-col-span-full tw-space-y-4 md:tw-col-start-2 md:tw-col-end-12 lg:tw-col-start-6 lg:tw-col-span-full lg:tw-pl-10 lg:tw-pr-12;
    }

    footer {
        align-self: end;
    }
}

@layer components {
    .form-input-container {
        @apply tw-flex tw-flex-col;
    }

        .form-input-container > * + * {
            @apply tw-mt-2;
        }

        .form-input-container > label {
            @apply tw-text-airForceBlue tw-font-semibold;
        }

        .form-input-container input {
            @apply tw-rounded-[3rem] tw-py-3.5 tw-px-4 tw-shadow-input tw-text-grey-80;
        }

        .form-input-container > p {
            @apply tw-text-grey-80 tw-text-xs;
        }

        .form-input-container.error > p {
            @apply tw-text-alert-60;
        }

    .button-primary {
        @apply tw-bg-airForceBlue tw-py-3.5 tw-px-6 tw-rounded-[3rem] tw-text-white;
    }

    .button-secondary {
        @apply tw-bg-white tw-text-primary-80 tw-border tw-border-primary-80 tw-py-3.5 tw-px-6 tw-rounded-[3rem];
    }

    .password-validation-requirement {
        @apply tw-flex tw-items-center tw-gap-2;
    }

        .password-validation-requirement:not(.invalid) > div:first-child {
            @apply tw-p-px tw-bg-success-80 tw-border-none;
        }

        .password-validation-requirement > div:first-child {
            @apply tw-rounded-full tw-border;
        }

        .password-validation-requirement.invalid > p {
            @apply tw-text-primary-40;
        }
}

.form-input-container {
    display: flex;
    flex-direction: column;
}

    .form-input-container > * + * {
        margin-top: 0.5rem;
    }

    .form-input-container > label {
        color: #04398E;
        font-weight: 600;
    }

.p {
    font-size: 0.75rem;
    line-height: 1rem;
    margin-block: .25rem;
}

#hintMessage {
    color: #55535A;
}

#errorMessage {
    color: #DF2935;
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input {
    width: 100%;
    border: none;
    border-radius: 3rem;
    padding-block: 0.875rem;
    padding-inline: 1rem;
    box-shadow: 0 0 9px 0 rgba(4, 57, 142, 0.20) inset;
    color: #55535A;
    line-height: 1.5;
    font-size: 100%;
}

.button {
    cursor: pointer;
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    line-height: 0;
}

#error-icon {
    position: absolute;
    right: 1rem;
}