/* The incoming page is revealed from the theme control's lower-left corner. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

.tb-theme-reveal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    clip-path: circle(0 at 0 100%);
}

html[data-theme="dark"] { background: #090909; }

html[data-theme="dark"] .home-page {
    --tb-page-bg: #090909;
    --tb-page-panel: #111;
    --tb-page-raised: #1a1a1a;
    --tb-page-ink: #f5f5f5;
    --tb-page-muted: #aaa;
    --tb-page-line: #303030;
    background: var(--tb-page-bg);
    color: var(--tb-page-ink);
    color-scheme: dark;
}

html[data-theme="dark"] .home-page :is(.cta-section, .quick-convert, .tools-section, .footer) {
    background: var(--tb-page-bg);
    color: var(--tb-page-ink);
}

html[data-theme="dark"] .home-page :is(.cta-section p, .quick-convert__heading h1, .tools-section-message, .tools-section-message.fade-in) {
    color: var(--tb-page-ink);
}

html[data-theme="dark"] .home-page .cta-section .highlight {
    color: #171717;
}

html[data-theme="dark"] .home-page #cta-section-btn {
    border-color: var(--tb-page-line);
    color: var(--tb-page-ink);
}

html[data-theme="dark"] .home-page #cta-section-btn:hover {
    border-color: var(--tb-page-ink);
    background: var(--tb-page-ink);
    color: var(--tb-page-bg);
}

html[data-theme="dark"] .home-page :is(
    .quick-convert__eyebrow,
    .quick-convert__heading p,
    .quick-convert__toolbar span,
    #batch-progress,
    .quick-convert__drop-caption,
    .quick-convert__file-meta span,
    .quick-convert__state,
    .tools-section__heading p,
    .tools-section__count,
    .grid-item > p,
    .tool-card__top,
    .no-match-notification p
) {
    color: var(--tb-page-muted);
}

html[data-theme="dark"] .home-page :is(
    .quick-convert__drop,
    .quick-convert__file,
    .quick-convert__clear-button,
    .quick-convert__add-button,
    .quick-convert__operation-trigger,
    .quick-convert__operation-search,
    .quick-convert__operation-menu,
    .quick-convert__file-download,
    .quick-convert__secondary,
    .search-bar,
    .tool-filter,
    .grid-item,
    .tool-card__action,
    .no-match-notification
) {
    border-color: var(--tb-page-line);
    background: var(--tb-page-panel);
    color: var(--tb-page-ink);
    box-shadow: none;
}

html[data-theme="dark"] .home-page :is(
    .quick-convert__file-list,
    .quick-convert__file + .quick-convert__file,
    .search-bar:focus-within
) {
    border-color: var(--tb-page-line);
}

html[data-theme="dark"] .home-page :is(
    .quick-convert__drop:hover,
    .quick-convert__drop.is-dragging,
    .quick-convert__drop:focus-visible,
    .quick-convert__clear-button:not(:disabled):hover,
    .quick-convert__add-button:not(:disabled):hover,
    .quick-convert__operation-option:hover,
    .quick-convert__operation-option:focus-visible,
    .quick-convert__operation-option[aria-checked="true"],
    .tool-filter:hover,
    .grid-item:hover,
    .grid-item.visible:hover,
    .tool-card__action:hover
) {
    border-color: #666;
    background: var(--tb-page-raised);
    color: var(--tb-page-ink);
}

html[data-theme="dark"] .home-page :is(
    .quick-convert__drop-icon,
    .quick-convert__file-icon,
    .search-bar button#search-clear
) {
    background: var(--tb-page-raised);
    color: var(--tb-page-ink);
}

html[data-theme="dark"] .home-page :is(
    .quick-convert__operation-option,
    .quick-convert__operation-search input,
    .search-bar input[type="search"],
    .grid-item h3
) {
    color: var(--tb-page-ink);
}

html[data-theme="dark"] .home-page :is(
    .quick-convert__primary,
    .tool-filter.is-active,
    .no-match-notification button
) {
    border-color: var(--tb-page-ink);
    background: var(--tb-page-ink);
    color: var(--tb-page-bg);
}

html[data-theme="dark"] .home-page .quick-convert__primary i {
    color: var(--tb-page-bg);
}

html[data-theme="dark"] .home-page :is(.tool-card__action:disabled, .tool-card__status--planned) {
    color: #888;
}

html[data-theme="dark"] .home-page :is(.footer-column h3, .footer-column ul li a, .footer-bottom p, .footer-social a) {
    color: var(--tb-page-muted);
}

html[data-theme="dark"] .home-page .footer-logo img {
    filter: invert(1) hue-rotate(180deg);
}