/* Period / range picker, shared by the holdings list and the dashboard chart.
 * The current item is marked with aria-current so the state lives in the markup. */
@layer components {
  .period-nav {
    --period-active-color: var(--color-accent);

    align-items: center;
    display: flex;
    gap: var(--inline-space);
    overflow-x: scroll;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
  }

  .period-nav__item {
    color: var(--color-ink-medium);

    &[aria-current="true"] {
      color: var(--period-active-color);
    }
  }

  .period-nav__select {
    appearance: none;
    background: none;
    border: 0;
    color: var(--color-ink-medium);
    font: inherit;
    padding: 0;

    &:focus { outline: none; }

    &[data-active="true"] {
      color: var(--period-active-color);
    }
  }
}