/* What the timeline's lines hold: the head of a firework's line, its bar,
   and the songs. They are placed with their times in milliseconds, at the
   timeline's scale (`--px-per-ms`). */

@layer components {
  /* The head of a firework's line: its kind and name; picks it. */
  .fw-row__pick {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--fw-row-size);
    padding: 0;
    border: 0;
    font: inherit;
    color: var(--color-text);
    text-align: start;
    background: none;
    cursor: pointer;
  }

  .fw-row__icon {
    flex: none;
    font-size: 1.25rem;
  }

  .fw-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fw-row--selected .fw-row__head {
    font-weight: 700;
    background: color-mix(in oklch, var(--fw-panel), var(--color-accent) 18%);
  }

  .fw-row--selected .fw-row__track {
    background: var(--fw-selected);
  }

  /* A firework's bar: its flight, then its glow. */
  .fw-bar {
    position: absolute;
    inset-block: var(--space-1);
    inset-inline-start: calc(var(--start) * var(--px-per-ms) * 1px);
    display: flex;
    inline-size: calc((var(--flight) + var(--glow)) * var(--px-per-ms) * 1px);
    min-inline-size: var(--space-2);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--fw-on-bar);
    border-radius: var(--radius-control);
    background: none;
    cursor: grab;
    touch-action: none;

    .fw-row--selected & {
      border-color: var(--color-focus);
    }
  }

  .fw-bar__flight {
    flex-grow: var(--flight);
    background: var(--fw-flight);
  }

  /* Told apart by more than its colour: the glow is striped. */
  .fw-bar__glow {
    flex-grow: var(--glow);
    background: repeating-linear-gradient(
      135deg,
      var(--fw-glow) 0 6px,
      color-mix(in oklch, var(--fw-glow), var(--fw-on-bar) 25%) 6px 12px
    );
  }

  /* A song: as long as it lasts. */
  .fw-song {
    position: absolute;
    inset-block: var(--space-1);
    inset-inline-start: calc(var(--start) * var(--px-per-ms) * 1px);
    display: flex;

    /* Cut at the end of the show, where it stops playing. */
    inline-size: calc(
      min(var(--length), var(--duration) - var(--start)) * var(--px-per-ms) *
        1px
    );
    min-inline-size: var(--space-6);
    overflow: hidden;
    border-radius: var(--radius-control);
    background: var(--fw-song);
  }

  .fw-song__move,
  .fw-song__remove {
    padding: 0 var(--space-2);
    border: 0;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--cream-50);
    background: none;
  }

  .fw-song__move {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: grab;
    touch-action: none;
  }

  .fw-song__title {
    font-weight: 700;
  }

  .fw-song__artists::before {
    content: " – " / "";
  }

  .fw-song__remove {
    min-inline-size: 1.5rem;
    cursor: pointer;
  }

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

    .fw-bar__glow {
      background: CanvasText;
    }
  }
}