/* ==========================================================================
   Folio — theme button and language flags for the pages without the app
   header (editor, sign-in pages). Same look as components.css, but with the
   colours from colors.css, so it needs nothing else.

   <div class="site-controls">
     <button class="theme-button" id="themeButton" ...>◐</button>
     <div class="language-switcher"> two .flag-button's </div>
   </div>
   ========================================================================== */

.site-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-controls .theme-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: 800 16px/1 system-ui, sans-serif;
  cursor: pointer;
}

.site-controls .theme-button:hover {
  border-color: var(--action-primary);
  background: var(--bg-selected);
}

.site-controls .language-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface);
}

.site-controls .flag-button {
  display: grid;
  width: 34px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.site-controls .flag-button:hover,
.site-controls .flag-button.active {
  background: var(--bg-selected);
}

.site-controls .flag {
  display: block;
  width: 24px;
  height: 16px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--border-decorative);
}

.site-controls .flag-nl {
  background: linear-gradient(to bottom, #ae1c28 0 33.33%, #ffffff 33.33% 66.66%, #21468b 66.66% 100%);
}

.site-controls .flag-gb {
  position: relative;
  background: #012169;
}

.site-controls .flag-gb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(35deg, transparent 42%, #ffffff 42% 48%, #c8102e 48% 52%, #ffffff 52% 58%, transparent 58%),
    linear-gradient(-35deg, transparent 42%, #ffffff 42% 48%, #c8102e 48% 52%, #ffffff 52% 58%, transparent 58%),
    linear-gradient(to right, transparent 38%, #ffffff 38% 45%, #c8102e 45% 55%, #ffffff 55% 62%, transparent 62%),
    linear-gradient(to bottom, transparent 34%, #ffffff 34% 43%, #c8102e 43% 57%, #ffffff 57% 66%, transparent 66%);
}