#app .calendar-choice-menu {
  position: fixed;
  z-index: var(--layer-popover);
  inline-size: max-content;
  max-inline-size: calc(100vw - var(--space-300));
  max-block-size: calc(100vh - var(--space-300));
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: start;

  & .menu__item {
    white-space: nowrap;
    cursor: default;
  }
}

#app [data-component='select'][data-field] {
  max-inline-size: 100%;

  & > [data-slot='value'] {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &[aria-expanded='true'] > [data-slot='chevron'] {
    transform: rotate(180deg);
  }
}

#app .form-choice__hue {
  flex: none;
  inline-size: var(--space-150);
  block-size: var(--space-150);
  border-radius: var(--radius-pill);
  background-color: var(--choice-hue);

  &[data-hue=''] {
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--border-mark-width) var(--ink-subtle);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app [data-component='select'][data-field] > [data-slot='chevron'] {
    transition: none;
  }
}