/* ==========================================================================
   Theme toggle — the topbar button's "beta" badge and its explainer tooltip.

   The button itself is a .btn-ghost .btn-icon, like every other topbar
   icon. What lives here is the light-theme-only labelling, and the room
   that label needs.

   The badge is scoped to html[data-theme="light"] because that is what it
   MEANS — "the light theme is still in progress" — not because it is
   patching a dark value. It is hidden by default and revealed only while
   light is active. Delete this file when light stops being a prototype.
   ========================================================================== */

.theme-beta-badge {
    display: none;
}

/* .btn-icon is a fixed square that clips its overflow, and on light the
   button carries a label as well as a glyph. */
html[data-theme="light"] .btn.theme-toggle-btn {
    width: auto;
    padding: 0 0.5rem;
    overflow: visible;
}

html[data-theme="light"] .theme-beta-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 0.4rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(var(--color-purple-rgb), 0.38);
    border-radius: 999px;
    background: rgba(var(--color-purple-rgb), 0.12);
    color: var(--color-purple);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

/* Wider cap for the beta explainer, which is a paragraph rather than a label.
   `data-tip-class` on the trigger puts this class on #tip for the length of the
   hover (js/components/tooltip.js). */
#tip.theme-beta-tooltip .tip-body {
    max-width: 320px;
}