/* ==========================================================
   TypingTutor.Online
   Shared Section Header Polish v17.5.3
========================================================== */

.test-logo-stack {
    position: relative;
    display: block;
    width: min(280px, 100%);
    min-width: 0;
    aspect-ratio: 280 / 58;
}

.test-logo-stack .test-logo-light,
.test-logo-stack .test-logo-dark {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
    transition: opacity .16s ease;
}

.test-logo-stack .test-logo-dark {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

html[data-theme="light"] .test-logo-light,
html[data-theme="system"] .test-logo-light {
    opacity: 1;
}

html[data-theme="light"] .test-logo-dark {
    opacity: 0;
}

html[data-theme="dark"] .test-logo-light {
    opacity: 0;
}

html[data-theme="dark"] .test-logo-dark {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .test-logo-light {
        opacity: 0;
    }

    html[data-theme="system"] .test-logo-dark {
        opacity: 1;
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] .test-logo-light {
        opacity: 1;
    }

    html[data-theme="system"] .test-logo-dark {
        opacity: 0;
    }
}

/* The homepage Theme manager creates this exact three-part button. */
.test-header-inner > #themeButton .theme-button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    font-size: .75em;
    line-height: 1;
}

@media (max-width: 560px) {
    .test-logo-stack {
        width: min(190px, 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .test-logo-stack .test-logo-light,
    .test-logo-stack .test-logo-dark {
        transition: none;
    }
}