/* Color themes, hand-written part. The page colors come from the generated sheets in
   themes/ (beta-auth/make_beta_themes.py) and the charts from beta.js; this file adds what
   those cannot do: the theme swatches, the logo (an image, turned with a hue filter) and the
   Rainbow background. The default theme is the live site as it is. */

/* Swatches: the bar's theme menu and the account page */
.bk-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px;
             border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); background: #0a7afc; }
.bk-swatch[data-swatch="purple"] { background: #621dba; }
.bk-swatch[data-swatch="green"] { background: #279662; }
.bk-swatch[data-swatch="pink"] { background: #e41583; }
.bk-swatch[data-swatch="rainbow"] { background: conic-gradient(#e8505b, #f08c2e, #e0b100, #2fb36b, #2f8de4, #7b5cd6, #d6479a, #e8505b); }

/* The logo: same turn as the brand blue (hue 212) to the theme's hue */
:root[data-bk-theme="purple"] .logo-container img { filter: hue-rotate(54deg); }
:root[data-bk-theme="green"] .logo-container img { filter: hue-rotate(-60deg) saturate(0.7); }
:root[data-bk-theme="pink"] .logo-container img { filter: hue-rotate(116deg); }
:root[data-bk-theme="rainbow"] .logo-container img { filter: saturate(0.25); }   /* slate accents */

/* Rainbow: a rainbow page background (deep enough for the white header text) */
:root[data-bk-theme="rainbow"] { background: #2a7fd0; }
:root[data-bk-theme="rainbow"] body { background: transparent !important; }
/* A fixed layer behind the page, sized to the screen: the rainbow stays whole however long the
   page (a background on body stretched over the full height; background-attachment: fixed is
   ignored on iPhones) */
:root[data-bk-theme="rainbow"] body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, #e0464f 0%, #e8822a 18%, #d1a400 34%, #2a9d5f 50%, #2a7fd0 66%, #6f4fcf 82%, #c43f8d 100%);
}

/* The bar's ghost buttons stay transparent in every theme (the themed .bk-bar button
   background would otherwise win), so the theme swatch shows on the bar */
:root[data-bk-theme] .bk-bar .bk-bar-ghost { background: transparent; }
:root[data-bk-theme] .bk-bar .bk-theme-menu button { background: none; color: #26303f; }
:root[data-bk-theme] .bk-bar .bk-theme-menu button:hover { background: #f2f4f8; }
:root[data-bk-theme] .bk-bar .bk-theme-menu button[aria-pressed="true"] { background: #eef2f8; }