@layer env.components {
  .env-combobox {
    --env-field-height: max(var(--env-control-height), var(--env-text-field-least, 0rem));
  }
  @media (pointer: coarse) {
    .env-combobox {
      --env-field-height: max(var(--env-control-height), var(--env-control-height-touch));
    }
  }
  .env-combobox .env-combobox-control {
    --env-combobox-row: 1.375rem;
    --env-combobox-action: max(
      var(--env-control-target-min),
      calc(var(--env-field-height) - var(--env-space-2))
    );
    --env-combobox-actions: 1;
    --env-combobox-end: var(--env-space-1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--env-space-1);
    padding-block: calc(
      (var(--env-field-height) - 2 * var(--env-control-border-width) - var(--env-combobox-row)) / 2
    );
    padding-inline: var(--env-space-3)
      calc(
        var(--env-combobox-end) + var(--env-combobox-actions) * var(--env-combobox-action) +
          var(--env-combobox-actions) * var(--env-space-1)
      );
    cursor: text;
  }
  .env-combobox .env-combobox-control[data-action-count='2'] {
    --env-combobox-actions: 2;
  }
  .env-combobox .env-combobox-control > .env-combobox-input {
    --env-combobox-input-min-width: 4rem;
    flex: 1 1 var(--env-combobox-input-min-width);
    inline-size: auto;
    min-inline-size: min(var(--env-combobox-input-min-width), 100%);
    min-block-size: var(--env-combobox-row);
    padding: 0;
    border-radius: 0;
    text-overflow: ellipsis;
  }
  @supports (field-sizing: content) {
    .env-combobox .env-combobox-control:has(> .env-combobox-chip) > .env-combobox-input {
      flex: 1 1 auto;
      min-inline-size: var(--env-space-2);
      field-sizing: content;
    }
  }
  .env-combobox .env-combobox-control > :is(.env-combobox-chip, .env-combobox-start) {
    position: relative;
    inset-block-start: var(--env-text-field-value-shift, 0);
  }
  .env-combobox .env-combobox-control > .env-combobox-input:read-only {
    cursor: default;
  }
  .env-combobox-trigger .env-icon {
    transform: rotate(90deg);
  }
  .env-combobox-trigger[data-popup-open] .env-icon {
    transform: rotate(270deg);
  }
  .env-combobox-control:has(> .env-combobox-input:disabled)
    .env-combobox-end
    > :is(.env-combobox-trigger, .env-combobox-clear) {
    cursor: default;
  }
  .env-combobox-control:has(> .env-combobox-input[readonly]:not(:disabled))
    .env-combobox-end
    > .env-combobox-trigger {
    pointer-events: none;
  }
  .env-combobox-start {
    --env-combobox-start-size: 1.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: var(--env-combobox-start-size);
    block-size: var(--env-combobox-start-size);
    color: var(--env-color-fg-muted);
    --env-icon-size: min(var(--env-control-icon-size), var(--env-combobox-start-size));
  }
  :where(.env-combobox-start) > .env-avatar:not(env-none) {
    --env-avatar-size: var(--env-combobox-start-size);
  }
  .env-combobox-start > :is(svg, img),
  .env-combobox-start > .env-icon {
    inline-size: var(--env-icon-size);
    block-size: var(--env-icon-size);
    object-fit: contain;
  }
  .env-combobox .env-combobox-value-icon {
    --env-combobox-start-size: min(var(--env-picture-size-sm), var(--env-field-height) - 0.375rem);
    margin-block: calc((var(--env-combobox-row) - var(--env-combobox-start-size)) / 2);
  }
  .env-combobox .env-combobox-value-icon:has(> .env-avatar > .env-avatar-fallback-initials) {
    --env-combobox-start-fit: calc(
      (
          min(var(--env-picture-size-sm), var(--env-field-height) - 0.375rem) - 0.96 *
            var(--env-picture-size-sm)
        ) *
        1000
    );
    --env-combobox-start-size: min(
      var(--env-picture-size-sm),
      var(--env-field-height) - 0.375rem,
      max(0rem, var(--env-combobox-start-fit))
    );
    --env-combobox-start-gap: clamp(0rem, var(--env-combobox-start-fit), var(--env-space-1));
    margin-inline-end: calc(var(--env-combobox-start-gap) - var(--env-space-1));
  }
  @property --env-combobox-chip-container {
    syntax: '*';
    inherits: false;
  }
  @property --env-combobox-chip-content {
    syntax: '*';
    inherits: false;
  }
  .env-combobox-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--env-space-1);
    min-inline-size: 0;
    max-inline-size: 100%;
    block-size: var(--env-combobox-row);
    padding-inline: var(--env-space-2) calc(var(--env-space-1) / 2);
    border-radius: var(--env-radius-sm);
    background: var(--env-combobox-chip-container, var(--env-color-bg-neutral-muted));
    color: var(--env-combobox-chip-content, var(--env-color-fg-default));
    font: var(--env-font-weight-body) var(--env-font-size-label) / 1.25 var(--env-font-family);
    cursor: default;
    outline: none;
  }
  .env-combobox .env-combobox-chip {
    font-size: var(--env-font-size-label-sm);
  }
  .env-combobox-chip:not(:has(> .env-combobox-chip-remove)) {
    padding-inline-end: var(--env-space-2);
  }
  .env-combobox-chip:has(> .env-combobox-start) {
    --env-combobox-chip-start-inset: 0.1875rem;
    padding-inline-start: var(--env-combobox-chip-start-inset);
  }
  .env-combobox-chip > .env-combobox-start:has(> .env-avatar > .env-avatar-fallback-initials) {
    display: none;
  }
  .env-combobox-chip:has(> .env-combobox-start > .env-avatar > .env-avatar-fallback-initials) {
    padding-inline-start: var(--env-space-2);
  }
  .env-combobox-chip > .env-combobox-start {
    --env-combobox-start-size: calc(var(--env-combobox-row) - 0.375rem);
  }
  .env-combobox-chip:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 1px;
  }
  .env-combobox-chip-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .env-combobox-chip-remove {
    --env-control-height: calc(var(--env-combobox-row) - 0.25rem);
    --env-button-touch-height: 0rem;
    --env-icon-size: 0.75rem;
    flex: 0 0 auto;
    border-radius: calc(var(--env-radius-sm) - var(--env-space-1) / 2);
  }
  .env-combobox-popup {
    --env-list-row-icon-size: var(--env-picture-size-sm);
    width: max-content;
    min-width: min(var(--anchor-width), var(--available-width));
    --env-combobox-popup-max-width: 22rem;
    --env-combobox-popup-max-height: 20rem;
    max-width: min(var(--env-combobox-popup-max-width), var(--available-width));
    max-block-size: min(var(--available-height), var(--env-combobox-popup-max-height));
    overflow: hidden;
    padding: var(--env-popup-padding);
    border-radius: var(--env-popup-radius);
  }
  .env-combobox-popup[hidden] {
    display: none;
  }
  .env-combobox-list {
    grid-auto-rows: minmax(min-content, auto);
    align-content: start;
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--env-space-1);
  }
  .env-combobox-group + .env-combobox-group {
    margin-block-start: var(--env-popup-group-gap);
  }
  .env-combobox-item {
    text-align: start;
    overflow-wrap: break-word;
  }
  .env-combobox-item[data-disabled] {
    cursor: default;
  }
  .env-combobox-item[data-selected] {
    font-weight: var(--env-font-weight-medium);
  }
  .env-combobox-popup .env-combobox-start {
    --env-combobox-start-size: var(--env-picture-size-sm);
  }
  .env-combobox-group-label {
    padding-block: var(--env-popup-padding) calc(0.1 * var(--env-control-height-md));
    padding-inline: var(--env-popup-label-padding-inline);
    color: var(--env-color-fg-muted);
    font: var(--env-font-weight-medium) var(--env-font-size-caption) / 1.4 var(--env-font-family);
    letter-spacing: 0.01em;
    overflow-wrap: break-word;
  }
  .env-combobox-status:not(:empty),
  .env-combobox-empty:not(:empty) {
    display: flex;
    align-items: center;
    gap: var(--env-popup-row-gap);
    min-block-size: var(--env-control-height-md);
    padding: var(--env-space-1) var(--env-popup-row-padding-inline);
    color: var(--env-color-fg-muted);
    font: var(--env-font-weight-body) var(--env-font-size-body) / 1.35 var(--env-font-family);
    overflow-wrap: break-word;
  }
  @media (pointer: coarse) {
    .env-combobox .env-combobox-control {
      --env-combobox-row: 1.75rem;
      row-gap: var(--env-space-2);
    }
    .env-combobox-chip-remove {
      --env-icon-size: 0.875rem;
      --env-icon-button-hit-area: calc(var(--env-combobox-row) + var(--env-space-2));
      z-index: var(--env-z-raised);
    }
    .env-combobox-popup .env-combobox-item {
      min-block-size: var(--env-control-height-touch);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .env-combobox-control:has(> .env-combobox-chip):not(:hover, :focus-within)
      > .env-combobox-end
      > .env-combobox-clear {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-combobox-end > .env-combobox-clear {
      transition-property: background-color, color, opacity;
    }
  }
  .env-combobox-trigger {
    animation: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-combobox-trigger .env-icon {
      transition: transform var(--env-motion-duration-fast) var(--env-motion-ease-exit);
    }
    .env-combobox-trigger[data-popup-open] .env-icon {
      transition: transform var(--env-motion-duration-medium) var(--env-motion-ease-enter);
    }
  }
  @media (forced-colors: active) {
    .env-combobox-item[data-disabled][data-highlighted] {
      color: HighlightText;
      opacity: var(--env-state-disabled-opacity);
    }
  }
}