@layer env.components {
  @property --env-list-item-container {
    syntax: '*';
    inherits: false;
  }
  @property --env-list-item-content {
    syntax: '*';
    inherits: false;
  }
  @property --env-list-item-selected {
    syntax: '*';
    inherits: false;
  }
  @property --env-list-item-selected-content {
    syntax: '*';
    inherits: false;
  }
  .env-list {
    --env-list-row-padding: calc(var(--env-row-padding-block-md) + var(--env-space-1));
    overflow-wrap: break-word;
    gap: calc(var(--env-space-1) / 2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .env-list > .env-list-item {
    --env-list-item-container-default: var(--env-color-bg-list-item);
    --env-list-item-fill-hover: var(--env-color-bg-list-item-hover);
    --env-list-item-fill-pressed: var(--env-color-bg-list-item-pressed);
    --env-list-item-layer: initial;
    --env-list-item-content-gate: color-mix(
      in srgb,
      var(--env-list-item-content) 0%,
      var(--env-list-item-container-default)
    );
    --env-list-item-custom-base: var(--env-list-item-container, var(--env-list-item-content-gate));
    --env-list-item-custom-layered: color-mix(
      in srgb,
      var(--env-list-item-custom-base),
      currentColor var(--env-list-item-layer)
    );
    --env-list-item-custom-fill: var(
      --env-list-item-custom-layered,
      var(--env-list-item-custom-base)
    );
    box-sizing: border-box;
    min-height: calc(var(--env-control-height-sm) + 2 * var(--env-list-row-padding));
    padding: var(--env-list-row-padding) var(--env-row-padding-inline);
    font: var(--env-type-body-sm);
    background: var(--env-list-item-custom-fill, var(--env-list-item-container-default));
    color: var(--env-list-item-content, var(--env-color-fg-default));
  }
  .env-list[data-density='xs'] {
    --env-list-row-padding: calc(var(--env-row-padding-block-xs) + var(--env-space-1));
  }
  .env-list[data-density='sm'] {
    --env-list-row-padding: calc(var(--env-row-padding-block-sm) + var(--env-space-1));
  }
  .env-list[data-density='lg'] {
    --env-list-row-padding: calc(var(--env-row-padding-block-lg) + var(--env-space-1));
  }
  .env-list > .env-list-item[data-start] {
    justify-content: flex-start;
  }
  .env-list > .env-list-item[data-start] > .env-list-item-content,
  .env-list > .env-list-item[data-start] > .env-skeleton-content > .env-list-item-content {
    flex: 1 1 0;
  }
  .env-list-item-start {
    position: relative;
    z-index: var(--env-z-raised);
    flex: 0 0 auto;
    --env-icon-size: var(--env-icon-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--env-icon-size);
  }
  .env-list-item-start > :is(svg, img) {
    inline-size: var(--env-icon-size);
    block-size: var(--env-icon-size);
    object-fit: contain;
  }
  .env-list-item-start > .env-list-item-handle {
    margin-inline-start: calc(-1 * var(--env-space-3));
    cursor: grab;
    touch-action: none;
  }
  .env-list[data-reordering] .env-list-item-handle {
    cursor: grabbing;
  }
  .env-list > .env-list-item:is([data-selected], :has(> .env-list-item-start input:checked)) {
    --env-list-item-container-default: var(--env-color-bg-selected);
    --env-badge-underlay: var(--env-color-bg-raised);
    --env-list-item-fill-hover: var(--env-color-bg-selected-hover);
    --env-list-item-fill-pressed: var(--env-color-bg-selected-pressed);
    --env-list-item-content-gate: color-mix(
      in srgb,
      var(--env-list-item-selected-content) 0%,
      var(--env-color-bg-selected)
    );
    --env-list-item-custom-base: var(--env-list-item-selected, var(--env-list-item-content-gate));
    color: var(
      --env-list-item-selected-content,
      var(--env-list-item-content, var(--env-color-fg-default))
    );
  }
  .env-list > .env-list-item[data-selected][data-interactive] [data-row-target] {
    color: inherit;
  }
  .env-list[data-reordering] > .env-list-item {
    position: relative;
    transition: translate var(--env-motion-duration-medium) var(--env-motion-ease);
  }
  .env-list > .env-list-item[data-moving] {
    z-index: var(--env-z-raised);
    box-shadow: inset 0 0 0 var(--env-control-border-width) var(--env-elevation-2-border);
  }
  .env-list > .env-list-item[data-moving='pointer'] {
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .env-list[data-reordering] > .env-list-item {
      transition: none;
    }
  }
  .env-list-announcer {
    --env-list-announcer-size: 0.0625rem;
    position: absolute;
    inline-size: var(--env-list-announcer-size);
    block-size: var(--env-list-announcer-size);
    margin: calc(-1 * var(--env-list-announcer-size));
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .env-list small {
    display: block;
    color: var(--env-color-fg-muted);
    font: var(--env-type-body-sm);
  }
  .env-list-item-content > small:empty:not([data-env-skeleton] *) {
    display: none;
  }
  [data-env-skeleton] .env-list-item-content > small {
    --env-skeleton-placeholder: inline-block;
    --env-skeleton-length: 10rem;
  }
  .env-surface[data-background='muted']:not(
      :has(> :not(.env-list, .env-skeleton-status, .env-skeleton-content))
    ):not(:has(> .env-skeleton-content > :not(.env-list, .env-skeleton-status)))
    > .env-list
    > .env-list-item,
  .env-surface[data-background='muted']:not(
      :has(> :not(.env-list, .env-skeleton-status, .env-skeleton-content))
    ):not(:has(> .env-skeleton-content > :not(.env-list, .env-skeleton-status)))
    > .env-skeleton-content
    > .env-list
    > .env-list-item {
    --env-list-item-container-default: var(--env-color-bg-default);
    --env-list-item-fill-hover: var(--env-color-bg-default-hover);
    --env-list-item-fill-pressed: var(--env-color-bg-default-pressed);
  }
  .env-list > .env-list-item[data-interactive] {
    position: relative;
    transition: background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-list > .env-list-item[data-interactive] [data-row-target] {
    max-inline-size: none;
    -webkit-user-drag: none;
  }
  .env-list > .env-list-item[data-interactive] [data-row-target]::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .env-list > .env-list-item[data-interactive]:has([data-row-target]:focus-visible) {
    --env-list-item-focus-ring: 0.125rem;
    outline: var(--env-list-item-focus-ring) solid var(--env-color-border-focus);
    outline-offset: calc(-1 * var(--env-list-item-focus-ring));
  }
  .env-list > .env-list-item[data-interactive] [data-row-target]:focus-visible {
    outline: none;
  }
  .env-list > .env-list-item[data-interactive]:is(:hover, :has(:focus-visible)) {
    --env-color-fg-link: var(--env-color-fg-link-on-muted);
    --env-color-fg-link-hover: var(--env-color-fg-link-on-muted-hover);
    --env-color-fg-link-pressed: var(--env-color-fg-link-on-muted-pressed);
    --env-list-item-layer: calc(var(--env-state-hover-opacity) * 100%);
    background: var(--env-list-item-custom-fill, var(--env-list-item-fill-hover));
  }
  .env-list
    > .env-list-item[data-interactive]:is(
      :has([data-row-target]:active),
      :not(:has([data-row-target])):active
    ) {
    --env-color-fg-link: var(--env-color-fg-link-on-muted);
    --env-color-fg-link-hover: var(--env-color-fg-link-on-muted-hover);
    --env-color-fg-link-pressed: var(--env-color-fg-link-on-muted-pressed);
    --env-list-item-layer: calc(var(--env-state-pressed-opacity) * 100%);
    background: var(--env-list-item-custom-fill, var(--env-list-item-fill-pressed));
  }
  .env-list
    > .env-list-item[data-interactive]:is(
      [data-selected],
      :has(> .env-list-item-start input:checked)
    ):is(:hover, :has(:focus-visible)) {
    --env-list-item-layer: calc(var(--env-state-hover-opacity) * 75%);
  }
  .env-list
    > .env-list-item[data-interactive]:is(
      [data-selected],
      :has(> .env-list-item-start input:checked)
    ):is(:has([data-row-target]:active), :not(:has([data-row-target])):active) {
    --env-list-item-layer: calc(var(--env-state-pressed-opacity) * 75%);
  }
  @media (prefers-reduced-motion: reduce) {
    .env-list > .env-list-item[data-interactive] {
      transition: none;
    }
  }
  .env-surface[data-background='muted']:not(
      :has(> :not(.env-list, .env-skeleton-status, .env-skeleton-content))
    ):not(:has(> .env-skeleton-content > :not(.env-list, .env-skeleton-status)))
    > .env-list
    + .env-list,
  .env-surface[data-background='muted']:not(
      :has(> :not(.env-list, .env-skeleton-status, .env-skeleton-content))
    ):not(:has(> .env-skeleton-content > :not(.env-list, .env-skeleton-status)))
    > .env-list
    + .env-skeleton-status
    + .env-list,
  .env-surface[data-background='muted']:not(
      :has(> :not(.env-list, .env-skeleton-status, .env-skeleton-content))
    ):not(:has(> .env-skeleton-content > :not(.env-list, .env-skeleton-status)))
    > .env-skeleton-content
    > .env-list
    + .env-list,
  .env-surface[data-background='muted']:not(
      :has(> :not(.env-list, .env-skeleton-status, .env-skeleton-content))
    ):not(:has(> .env-skeleton-content > :not(.env-list, .env-skeleton-status)))
    > .env-skeleton-content
    > .env-list
    + .env-skeleton-status
    + .env-list {
    margin-block-start: var(--env-space-3);
  }
  @media (forced-colors: active) {
    .env-list > .env-list-item:is([data-selected], :has(> .env-list-item-start input:checked)) {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
    .env-list > .env-list-item[data-moving] {
      outline: 2px solid CanvasText;
      outline-offset: -2px;
    }
  }
  [data-env-skeleton] .env-list-item {
    background-image: var(--env-skeleton-overlay);
  }
  .env-list[data-env-skeleton]:not(env-none) {
    background-image: none;
  }
}