/**
 * Timeline primitives
 * Vertical timelines, dots, connecting lines
 */
@layer ks-primitives {
  /* ==========================================================================
     Vertical Timeline
     ========================================================================== */

  .ks-timeline {
    position: relative;
  }

  .ks-timeline__line {
    position: absolute;
    left: var(--ks-space-4);
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--ks-color-primary-200);
  }

  :is(.dark, [data-theme="dark"]) .ks-timeline__line {
    background-color: var(--ks-color-primary-800);
  }

  .ks-timeline__item {
    position: relative;
    padding-left: var(--ks-space-12);
  }

  .ks-timeline__dot {
    position: absolute;
    left: calc(var(--ks-space-4) - 6px);
    top: var(--ks-space-1);
    width: 14px;
    height: 14px;
    border-radius: var(--ks-radius-full);
    background-color: var(--ks-color-primary-600);
    box-shadow: 0 0 0 4px var(--ks-color-white);
  }

  :is(.dark, [data-theme="dark"]) .ks-timeline__dot {
    background-color: var(--ks-color-primary-400);
    box-shadow: 0 0 0 4px var(--ks-color-gray-900);
  }

  /* ==========================================================================
     Timeline Node States (Festival Archive Nav)
     ========================================================================== */

  .ks-timeline-node-active {
    background-color: var(--ks-color-warning-600);
    box-shadow: 0 0 0 4px var(--ks-color-warning-200);
    transform: scale(1.25);
  }

  :where(.dark) .ks-timeline-node-active {
    background-color: var(--ks-color-warning-500);
    box-shadow: 0 0 0 4px var(--ks-color-warning-900);
  }

  .ks-timeline-node-past {
    background-color: var(--ks-color-danger-700);
  }

  :where(.dark) .ks-timeline-node-past {
    background-color: var(--ks-color-danger-500);
  }

  .ks-timeline-node-past:hover {
    background-color: var(--ks-color-danger-600);
  }

  :where(.dark) .ks-timeline-node-past:hover {
    background-color: var(--ks-color-danger-400);
  }

  .ks-timeline-node-upcoming {
    background-color: var(--ks-color-gray-300);
  }

  :where(.dark) .ks-timeline-node-upcoming {
    background-color: var(--ks-color-gray-600);
  }

  .ks-timeline-node-upcoming:hover {
    background-color: var(--ks-color-warning-400);
  }

  :where(.dark) .ks-timeline-node-upcoming:hover {
    background-color: var(--ks-color-warning-600);
  }

  /* ==========================================================================
     Timeline Year Label States
     ========================================================================== */

  .ks-timeline-year-active {
    color: var(--ks-color-warning-700);
  }

  :where(.dark) .ks-timeline-year-active {
    color: var(--ks-color-warning-400);
  }

  .ks-timeline-year-inactive {
    color: var(--ks-color-gray-500);
  }

  :where(.dark) .ks-timeline-year-inactive {
    color: var(--ks-color-gray-400);
  }
}