@layer env.components {
  .env-time-list {
    --env-time-list-row: var(--env-picker-popup-day, calc(var(--env-row-height) - 0.25rem));
    --env-time-list-rows: 5;
    display: grid;
    grid-auto-columns: minmax(max-content, 1fr);
    grid-auto-flow: column;
    gap: var(--env-space-1);
    min-inline-size: 0;
    color: var(--env-color-fg-muted);
    font: var(--env-type-body-sm);
  }
  .env-time-list-column {
    position: relative;
    block-size: calc(var(--env-time-list-rows) * var(--env-time-list-row));
    min-inline-size: var(--env-time-list-row);
    padding-inline: var(--env-space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    outline: none;
    --env-time-list-fade: calc(0.3 * var(--env-time-list-row));
    --env-time-list-fade-edge: color-mix(in srgb, currentcolor 35%, transparent);
    mask-image: linear-gradient(
      var(--env-time-list-fade-edge),
      currentcolor var(--env-time-list-fade),
      currentcolor calc(100% - var(--env-time-list-fade)),
      var(--env-time-list-fade-edge)
    );
  }
  .env-time-list-column:is([data-turning], [data-dragging]) {
    scroll-snap-type: none;
  }
  .env-time-list-column[data-dragging],
  .env-time-list-column[data-dragging] > .env-time-list-row {
    cursor: grabbing;
  }
  .env-time-list-column::-webkit-scrollbar {
    display: none;
  }
  .env-time-list-column:not([data-loop]) {
    padding-block: calc((var(--env-time-list-rows) - 1) / 2 * var(--env-time-list-row));
  }
  .env-time-list-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: max-content;
    min-inline-size: var(--env-time-list-row);
    block-size: var(--env-time-list-row);
    margin-inline: auto;
    padding-inline: var(--env-space-1);
    border-radius: var(--env-radius-full);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    scroll-snap-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .env-time-list-row[data-centered] {
    background: var(--env-color-bg-primary-emphasis);
    color: var(--env-color-fg-on-emphasis);
    font: var(--env-type-body);
    font-weight: var(--env-font-weight-semibold);
  }
  .env-time-list-column:focus-visible > .env-time-list-row[data-centered] {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 1px;
  }
  .env-time-list-row[data-disabled] {
    text-decoration: line-through;
    cursor: default;
  }
  .env-time-list-row[data-disabled]:not([data-centered]) {
    color: var(--env-color-fg-disabled);
  }
  .env-time-list-row[data-disabled][data-centered] {
    opacity: var(--env-state-disabled-opacity);
  }
  @media (pointer: coarse) {
    .env-time-list {
      --env-time-list-row: var(--env-control-height-touch);
    }
  }
  @media (forced-colors: active) {
    .env-time-list-row[data-centered] {
      forced-color-adjust: none;
      background-color: Highlight;
      color: HighlightText;
    }
    .env-time-list-column:focus-visible > .env-time-list-row[data-centered] {
      outline-color: CanvasText;
    }
    .env-time-list-row[data-disabled] {
      color: GrayText;
    }
  }
}