@use '../abstracts/variables' as *;
@use '../base/typography' as *;

.container {
    padding: 1rem;
    display: flex;
    height: 100vh;
    max-width: unset;
}

.auth-banner {
    position: relative;
    width: 600px;

    &__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
}

.auth-content {
    padding: 0rem 2rem;
    width: 100%;

    .cardinal-logo {
        position: absolute;
    }
}

.auth-form {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &__social {
        display: flex;
        gap: 0.5rem;

        & .button {
            width: 100%;
        }
    }

    & .divider {
        margin: .75rem 0;
    }
}

.auth-form-header {
    margin-bottom: 1.5rem;

    &__title {
        font-size: 1.5rem;

        &-sub {
            font-size: 0.85rem;
            font-weight: 400;
            color: $color-text-muted;
        }
    }
}