/*
 * Authentication pages are plain Bootstrap markup: colours, borders, radii, spacing and type come from Bootstrap
 * classes and therefore from the product theme's --bs-* variables. This file holds only the measures Bootstrap has no
 * utility for. Each selector is no more specific than the Bootstrap rule it adjusts (the .auth-* scope sits inside
 * :where() and adds nothing), so this file, loaded after Bootstrap, wins over Bootstrap, and a product theme loaded
 * after the HeadOutlet wins over this file.
 */

/* An optional host-configured background image (Theme:Authentication:BackgroundImage). */
:where(.auth-shell) {
    background-image: var(--auth-background-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100dvh;
}

/* The centred column: about 440px for sign-in, 480px for registration. */
:where(.auth-column) {
    max-width: 27.5rem;
}

:where(.auth-column-wide) {
    max-width: 30rem;
}

/* The product logo, with the light or dark file shown to match the colour mode. */
:where(.auth-logo) {
    display: block;
    height: auto;
    max-height: 2.5rem;
    max-width: min(100%, 15rem);
    width: auto;
}

:where(.auth-logo-dark),
:where([data-bs-theme='dark']) :where(.auth-logo-light) {
    display: none;
}

:where([data-bs-theme='dark']) :where(.auth-logo-dark) {
    display: block;
}

/* 44px pointer targets for controls Bootstrap sizes smaller by default. */
:where(.auth-shell) .form-control,
:where(.auth-shell) .form-select,
:where(.auth-shell) .btn,
:where(.auth-shell) .form-check {
    min-height: 2.75rem;
}

:where(.auth-appearance) :where(#bb-theme) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
}

/* Blazor Bootstrap's theme switcher shows its "Toggle theme" text below lg. As in the shell header, the text stays as
   the button's accessible name but is hidden visually, matching Bootstrap's .visually-hidden. */
:where(.auth-appearance) #bb-theme-text {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

/* A solid focus outline in the theme's primary colour, in addition to Bootstrap's translucent focus ring. */
:where(.auth-shell) .btn:focus-visible,
:where(.auth-shell) .form-control:focus-visible,
:where(.auth-shell) .form-select:focus-visible,
:where(.auth-shell) .form-check-input:focus-visible,
:where(.auth-shell) a:focus-visible {
    outline: .125rem solid var(--bs-primary);
    outline-offset: .125rem;
}