@layer env.components {
  @property --env-select-container {
    syntax: '*';
    inherits: false;
  }
  @property --env-select-content {
    syntax: '*';
    inherits: false;
  }
  @property --env-select-outline {
    syntax: '*';
    inherits: false;
  }
  .env-select {
    --env-field-height: max(var(--env-control-height), var(--env-text-field-least, 0rem));
    --env-text-field-well: var(--env-select-container, var(--env-text-field-container, transparent));
    --env-text-field-text: var(
      --env-select-content,
      var(--env-text-field-content, var(--env-color-fg-default))
    );
    --env-text-field-edge: var(
      --env-select-outline,
      var(--env-text-field-outline, var(--env-color-border-default))
    );
  }
  @media (pointer: coarse) {
    .env-select {
      --env-field-height: max(var(--env-control-height), var(--env-control-height-touch));
    }
  }
  .env-select .env-select-control {
    --env-select-action: max(
      var(--env-control-target-min),
      calc(var(--env-field-height) - var(--env-space-2))
    );
    --env-select-end: var(--env-space-1);
  }
  .env-select .env-select-control > .env-select-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding-inline-end: calc(var(--env-select-end) + var(--env-select-action) + var(--env-space-1));
    text-align: start;
    cursor: pointer;
  }
  .env-select .env-select-control > .env-select-trigger:is(:disabled, [aria-readonly='true']) {
    cursor: default;
  }
  .env-select-control:has(> .env-select-trigger[aria-readonly='true']) .env-select-icon {
    color: var(--env-color-fg-muted);
  }
  .env-select-control:has(> .env-select-trigger:disabled) .env-select-icon {
    color: var(--env-color-fg-disabled);
  }
  .env-select-trigger > *,
  .env-select-sizer > * {
    grid-area: 1 / 1;
  }
  .env-select-value,
  .env-select-placeholder {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .env-select-sizer {
    --env-select-sizer-room: max(
      0rem,
      2 * var(--env-popup-padding) + 2 * var(--env-popup-row-padding-inline) +
        var(--env-popup-row-gap) + var(--env-control-icon-size) -
        (var(--env-space-4) + var(--env-select-end) + var(--env-select-action) + var(--env-space-1))
    );
    display: grid;
    padding-inline-end: var(--env-select-sizer-room);
    block-size: 0;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
  }
  .env-select-sizer > ::before {
    content: attr(data-label);
  }
  .env-select[data-label-hidden],
  .env-select:not(:has(.env-select-label)) {
    justify-self: start;
    inline-size: max-content;
    max-inline-size: 100%;
  }
  .env-select-placeholder {
    color: var(--env-color-fg-muted);
  }
  .env-select:not([data-label-hidden])
    .env-select-control:has(> label):not([data-label-floating], :focus-within)
    .env-select-placeholder {
    color: transparent;
  }
  .env-select-control > .env-select-label {
    cursor: pointer;
  }
  .env-select-end {
    pointer-events: none;
    inset-inline-end: var(--env-select-end);
  }
  .env-select-end > .env-icon.env-select-icon {
    display: grid;
    place-items: center;
    inline-size: var(--env-select-action);
    block-size: var(--env-select-action);
    color: var(--env-text-field-text, var(--env-color-fg-default));
    transform: rotate(90deg);
  }
  .env-select-control:has(> [aria-expanded='true']) .env-select-icon {
    transform: rotate(270deg);
  }
  .env-select-icon > svg {
    inline-size: var(--env-control-icon-size);
    block-size: var(--env-control-icon-size);
  }
  .env-select-popup {
    width: max-content;
    min-width: min(var(--anchor-width), var(--available-width));
    --env-select-popup-max-width: 22rem;
    max-width: min(var(--env-select-popup-max-width), var(--available-width));
    max-height: var(--available-height);
    overflow: hidden;
    padding: var(--env-popup-padding);
    border-radius: var(--env-popup-radius);
  }
  .env-select-popup:has(.env-select-item[aria-describedby]) {
    --env-select-described-width: 20rem;
    max-width: min(
      max(var(--anchor-width), var(--env-select-described-width)),
      var(--available-width)
    );
  }
  .env-select-popup[hidden] {
    display: none;
  }
  .env-select-list {
    grid-auto-rows: minmax(min-content, auto);
    align-content: start;
    min-height: 0;
    max-height: calc(var(--available-height) - var(--env-space-2));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .env-select-item {
    white-space: normal;
    overflow-wrap: break-word;
    text-align: start;
  }
  .env-select-item[data-selected] {
    font-weight: var(--env-font-weight-medium);
  }
  .env-select-item:focus-visible {
    --env-select-item-ring: var(--env-theme-high-contrast) var(--env-color-border-focus);
    outline: 2px solid var(--env-select-item-ring, transparent);
    outline-offset: -2px;
  }
  .env-select-item[data-disabled] {
    pointer-events: none;
  }
  @media (pointer: coarse) {
    .env-select-item {
      min-height: var(--env-control-height-touch);
    }
  }
  .env-select-icon {
    animation: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-select-end .env-select-icon {
      transition: transform var(--env-motion-duration-fast) var(--env-motion-ease-exit);
    }
    .env-select-control:has(> [aria-expanded='true']) .env-select-end .env-select-icon {
      transition: transform var(--env-motion-duration-medium) var(--env-motion-ease-enter);
    }
  }
  @media (forced-colors: active) {
    .env-select-item:focus-visible {
      outline: 2px solid CanvasText;
      outline-offset: -2px;
    }
    .env-select-item[data-highlighted]:focus-visible,
    .env-select-item[data-highlighted] :focus-visible {
      outline-color: HighlightText;
    }
    .env-select-item[data-disabled][data-highlighted] {
      color: HighlightText;
      opacity: var(--env-state-disabled-opacity);
    }
  }
}