/* Shared by the real bar and its administration preview. Decoration never captures clicks. */
.tb-topbar, .tb-topbar * { box-sizing: border-box; }
.tb-category-style[data-style="christmas"],
.tb-category-style[data-style="black_friday"],
.tb-category-style[data-style="custom"] {
    isolation: isolate;
    background-color: var(--tb-bg);
    color: var(--tb-color);
    box-shadow: inset 0 2px var(--tb-accent), inset 0 -2px var(--tb-secondary), var(--tb-shadow, 0 2px 8px #0003);
}
.tb-category-style[data-style="christmas"] {
    background-image: radial-gradient(ellipse at 15% 0, #ffffff12, transparent 55%), linear-gradient(115deg, #0002, transparent 38%, #0002);
}
.tb-category-style[data-style="christmas"]::before,
.tb-category-style[data-style="christmas"]::after {
    content: "";
    position: absolute;
    inset: 2px auto 2px 0;
    width: 80px;
    z-index: -1;
    pointer-events: none;
    opacity: .8;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='54' viewBox='0 0 80 54'%3E%3Cg fill='none' stroke='%23173f2c' stroke-width='3'%3E%3Cpath d='M0 50 52 7M5 45 2 20M10 41 35 45M15 37 11 12M22 31 47 34M28 26 25 3M34 21 57 23'/%3E%3C/g%3E%3Cpath d='M0 50 52 7' stroke='%23d6b567' fill='none'/%3E%3Cg fill='%23d6b567'%3E%3Cpath d='m65 9 1.8 4.2L71 15l-4.2 1.8L65 21l-1.8-4.2L59 15l4.2-1.8Z'/%3E%3Ccircle cx='48' cy='42' r='2'/%3E%3Ccircle cx='69' cy='35' r='1'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}
.tb-category-style[data-style="christmas"]::after { left: auto; right: 0; transform: rotate(180deg); }
.tb-category-style[data-style="black_friday"] { background-image: linear-gradient(120deg, transparent 55%, #ffffff08 55%, #ffffff08 65%, transparent 65%); }
.tb-topbar.tb-category-style:not([data-style="default"]) .tb-topbar__divider { background: var(--tb-accent); opacity: .5; }
.tb-topbar.tb-category-style:not([data-style="default"]) .tb-sec-countdown,
.tb-topbar.tb-category-style:not([data-style="default"]) .tb-topbar__countdown-global { color: var(--tb-accent); }
.tb-category-style .tb-topbar__inner { position: relative; z-index: 1; }
.tb-topbar.tb-category-style .tb-topbar__link:focus-visible,
.tb-topbar.tb-category-style .tb-topbar__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 640px) {
    .tb-category-style[data-style="christmas"]::before,
    .tb-category-style[data-style="christmas"]::after { width: 40px; opacity: .45; }
}
