/* The editor's timeline: a bar of controls, then lines that scroll both
   ways: the ruler (which stays at the top), the songs, and one line per
   firework. Each line has a head (which stays on the left) and a track
   where time runs: `--px-per-ms` sets its scale. What the lines hold is
   in fireworks-bars.css. */

@layer components {
  .fw-timeline {
    --timeline-size: 17.5rem;

    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    block-size: var(--timeline-size);
    min-block-size: 0;
  }

  /* Dragged up and down to resize the timeline. */
  .fw-timeline__resize {
    block-size: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-border);
    cursor: ns-resize;
    touch-action: none;
  }

  .fw-timeline__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    padding-block: var(--space-2);
  }

  .fw-timeline__title {
    font-size: var(--font-size-md);
  }

  .fw-timeline__time {
    min-inline-size: 8.5rem;
  }

  .fw-timeline__zoom {
    display: flex;
    gap: var(--space-2);
    align-items: center;

    input {
      accent-color: var(--color-accent);
    }
  }

  .fw-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
  }

  .fw-kinds__label {
    margin-inline-end: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .fw-kinds__button {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    font-size: 1.5rem;
    color: var(--color-text);
    background: none;
    cursor: pointer;

    &:hover {
      background: var(--fw-selected);
    }
  }

  .fw-timeline__scroll {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--fw-panel);
  }

  .fw-timeline__content {
    --px-per-ms: 0.01;
    --duration: 60000;

    position: relative;
    inline-size: calc(
      var(--fw-head-size) + var(--duration) * var(--px-per-ms) * 1px
    );
    min-inline-size: 100%;
    min-block-size: 100%;
  }

  .fw-timeline__empty {
    position: sticky;
    inset-inline-start: 0;
    max-inline-size: 40rem;
    padding: var(--space-3);
    color: var(--color-text-muted);

    &[hidden] {
      display: none;
    }
  }

  .fw-rows {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fw-row {
    display: grid;
    grid-template-columns: var(--fw-head-size) minmax(0, 1fr);
    min-block-size: var(--fw-row-size);
    border-block-end: 1px solid var(--color-border);
  }

  /* Stacking, from the back: the tracks, the pin, the heads, the ruler. */
  .fw-row__head {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    min-inline-size: 0;
    padding-inline: var(--space-2);
    border-inline-end: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    background: var(--fw-panel);
  }

  .fw-row__track {
    position: relative;
    min-inline-size: 0;
  }

  .fw-row__track--muted {
    opacity: 0.45;
  }

  .fw-row--ruler {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    background: var(--fw-panel);
  }

  .fw-ruler {
    cursor: pointer;
    touch-action: none;
    user-select: none;
  }

  /* Clipped: the label of the last mark would widen the timeline. */
  .fw-ruler__marks {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .fw-ruler__mark {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--at) * var(--px-per-ms) * 1px);
    padding-inline-start: var(--space-1);
    border-inline-start: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    pointer-events: none;
  }

  /* The pin: a grip in the ruler, and a line across every line. */
  .fw-ruler__grip {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: calc(var(--time, 0) * var(--px-per-ms) * 1px);
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: 50% 50% 0 0;
    background: var(--fw-pin);
    translate: -50% 0;
  }

  .fw-pin {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(
      var(--fw-head-size) + var(--time, 0) * var(--px-per-ms) * 1px
    );
    z-index: 1;
    inline-size: 2px;
    background: var(--fw-pin);
    translate: -50% 0;
    pointer-events: none;
  }

  .fw-timeline--folded {
    block-size: auto;
  }

  .fw-timeline--folded .fw-timeline__scroll {
    display: none;
  }

  @media (forced-colors: active) {
    .fw-pin,
    .fw-ruler__grip {
      background: Highlight;
    }
  }
}