/*
 * Librarium Militaris: the control bar.
 *
 * The strip that sticks to the top of a listing while it scrolls: the filter
 * toggle, the count, the spoiler switch and the sort order. The three readouts
 * live here rather than in files of their own because the bar is the only place
 * any of them appears.
 */

@layer components {
  .controlbar {
    --controlbar-blur: 12px;

    position: sticky;
    top: 0;
    z-index: var(--z-bar);
    background-color: var(--color-canvas-veil);
    -webkit-backdrop-filter: blur(var(--controlbar-blur));
    backdrop-filter: blur(var(--controlbar-blur));
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-controlbar);
  }

  .controlbar__row {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--space-12) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
  }

  .controlbar__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-12);
  }

  /* The group that keeps the row's width: the count grows, the sort side does not. */
  .controlbar__group--lead {
    gap: var(--space-16);
    flex: 1 1 auto;
  }

  /* -------------------------------------------------------------- count -- */

  .result-count {
    font-size: var(--text-14);
    line-height: var(--leading-20);
    color: var(--color-ink-soft);
  }

  .result-count__value {
    color: var(--color-ink-bright);
    font-weight: 500;
  }

  .result-count__total { color: var(--color-ink-dim); }

  /* ------------------------------------------------------ spoiler switch -- */

  /* The box gives up its own appearance and is drawn here, so the tick can be
     the archive's red rather than the system's blue. */
  .spoiler-switch {
    --switch-box: var(--space-16);
    --switch-tick: 0.55rem;

    display: flex;
    align-items: center;
    gap: var(--space-8);
    cursor: pointer;
    user-select: none;
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-2xs);
    color: var(--color-ink-muted);
    white-space: nowrap;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-ink-bright); }

    & input {
      appearance: none;
      -webkit-appearance: none;
      width: var(--switch-box);
      height: var(--switch-box);
      flex: none;
      display: grid;
      place-content: center;
      background-color: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: background-color var(--transition-fast), border-color var(--transition-fast);
    }

    & input::before {
      content: "";
      width: var(--switch-tick);
      height: var(--switch-tick);
      transform: scale(0);
      transition: transform var(--transition-check);
      box-shadow: inset 1rem 1rem var(--color-ink-bright);
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    & input:checked {
      background-color: var(--color-danger);
      border-color: var(--color-danger);
    }

    & input:checked::before { transform: scale(1); }

    /* The one focus ring not drawn in the accent: this box is the archive's
       red when it is on, and an amber ring around it read as a third state. */
    & input:focus-visible {
      outline: 2px solid var(--color-danger);
      outline-offset: var(--focus-ring-offset);
    }
  }

  /* ---------------------------------------------------------------- sort -- */

  .sortselect {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-surface);
    /* The chevron. Drawn in --color-ink-soft, which a data URI cannot name. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-8) center;
    background-size: var(--space-16) var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    padding: var(--space-6) var(--space-32) var(--space-6) var(--space-12);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

    &:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 1px var(--color-accent);
    }

    /* The dropped list is the operating system's, and takes only these two. */
    & option {
      background-color: var(--color-surface);
      color: var(--color-ink-muted);
    }
  }
}