@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;

@layer cinder.components {
  .chat-navigation-rail {
    display: grid;
    gap: 2px;
    inline-size: 2rem;
    max-block-size: 100%;
    overflow-y: auto;
    align-content: start;
    overscroll-behavior: contain;
    touch-action: none;
  }
  .chat-navigation-rail-row {
    position: relative;
    z-index: 0;
    min-block-size: var(--cinder-touch-target-min);
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface-raised);
    color: var(--cinder-text-muted);
    cursor: pointer;
    transition:
      transform 120ms ease,
      color 120ms ease;
  }
  .chat-navigation-rail-description {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
  }
  .chat-navigation-rail-row:hover,
  .chat-navigation-rail-row:focus-visible,
  .chat-navigation-rail-row[aria-current='true'] {
    color: var(--cinder-text-default);
    transform: scaleX(1.35);
    z-index: 1;
  }
  .chat-navigation-rail-row:has(+ .chat-navigation-rail-row[data-scrub-target]) {
    opacity: 0.7;
  }
  .chat-navigation-rail-row:has(
    + .chat-navigation-rail-row + .chat-navigation-rail-row[data-scrub-target]
  ) {
    opacity: 0.45;
  }
  .chat-navigation-rail-row[data-scrub-target] + .chat-navigation-rail-row,
  .chat-navigation-rail-row:has(+ .chat-navigation-rail-row[data-scrub-target]) {
    opacity: 0.7;
  }
  .chat-navigation-rail-row[data-scrub-target]
    + .chat-navigation-rail-row
    + .chat-navigation-rail-row,
  .chat-navigation-rail-row:has(
    + .chat-navigation-rail-row + .chat-navigation-rail-row[data-scrub-target]
  ) {
    opacity: 0.45;
  }
  .chat-navigation-rail-row:has(~ .chat-navigation-rail-row[data-scrub-target]) {
    opacity: 0.7;
  }
  .chat-navigation-rail-row:has(
    ~ .chat-navigation-rail-row:has(~ .chat-navigation-rail-row[data-scrub-target])
  ) {
    opacity: 0.45;
  }
  .chat-navigation-rail-label {
    font-size: var(--cinder-text-2xs);
  }
  .chat-navigation-rail-preview {
    position: fixed;
    left: var(--chat-navigation-preview-left);
    inset-block-start: var(--chat-navigation-preview-top);
    translate: 0 -50%;
    inline-size: max-content;
    max-inline-size: 18rem;
    max-block-size: calc(100dvh - 1rem);
    overflow: auto;
    padding: var(--cinder-space-2);
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface-raised);
    box-shadow: var(--cinder-shadow-sm);
    pointer-events: none;
    overflow-wrap: anywhere;
  }
  @media (prefers-reduced-motion: reduce) {
    .chat-navigation-rail-row {
      transition: none;
    }
  }
  .chat-navigation-rail-preview-left {
    translate: -100% -50%;
  }
}