/* Picks an exact date or jumps to one of the latest market sessions. */
.date-navigation {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

@scope (.date-navigation) {
  form,
  [data-quick-dates],
  [data-date-picker] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  input[type="date"] {
    height: var(--control-height);
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-strong);
    color: var(--color-heading);
    font: inherit;
  }

  [data-date-chip] {
    display: inline-flex;
    min-height: var(--control-height);
    align-items: center;
    padding: 0 var(--space-6);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface-strong);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  [data-date-chip]:hover {
    border-color: var(--color-accent-strong);
    color: var(--color-accent-strong);
  }

  [data-date-chip][aria-current="date"] {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-strong);
    color: var(--color-surface-strong);
  }
}