@layer env.components {
  .env-theme {
    --env-table-band: var(--env-color-bg-neutral-muted);
    --env-table-divider: var(--env-color-border-muted);
    --env-table-selected-weight: 75%;
  }
  .env-theme[data-env-contrast='high'] {
    --env-table-selected-weight: 100%;
  }
  @media (prefers-contrast: more) {
    .env-theme:not([data-env-contrast='standard']) {
      --env-table-selected-weight: 100%;
    }
  }
  .env-theme[data-env-theme='dark']:not([data-env-contrast='high']) {
    --env-table-band: oklch(from var(--env-color-bg-neutral-muted) l c h / calc(alpha * 0.65));
    --env-table-divider: color-mix(
      in srgb,
      var(--env-color-border-muted) 60%,
      var(--env-color-bg-raised)
    );
  }
  @media (prefers-contrast: more) {
    .env-theme[data-env-theme='dark']:not([data-env-contrast='standard']) {
      --env-table-band: var(--env-color-bg-neutral-muted);
      --env-table-divider: var(--env-color-border-muted);
    }
  }
  .env-table-region {
    --env-table-surface: var(--env-color-bg-raised);
    --env-avatar-group-ring: var(--env-table-surface);
    --env-avatar-dense: 1;
    position: relative;
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
    border: 1px solid var(--env-color-border-muted);
    border-radius: var(--env-radius-lg);
    background: var(--env-table-surface);
    scrollbar-width: thin;
  }
  .env-table-region:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 2px;
  }
  .env-table-region[data-sticky-header] {
    overflow-y: auto;
  }
  .env-table {
    --env-table-stacked: 0;
    --env-table-row-padding: var(--env-row-padding-block-md);
    --env-table-cell-padding: calc(var(--env-table-row-padding) + var(--env-space-1))
      var(--env-space-4);
    --env-control-height: var(--env-control-height-sm);
    --env-button-rest-underline: none;
    --env-hover-detail-rest-color: transparent;
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--env-color-fg-default);
    font: var(--env-type-body);
    text-align: start;
  }
  .env-table[data-density='xs'] {
    --env-table-row-padding: var(--env-row-padding-block-xs);
  }
  .env-table[data-density='sm'] {
    --env-table-row-padding: var(--env-row-padding-block-sm);
  }
  .env-table[data-density='lg'] {
    --env-table-row-padding: var(--env-row-padding-block-lg);
  }
  .env-table-caption {
    padding: 0 0 var(--env-space-2);
    caption-side: top;
    color: var(--env-color-fg-default);
    font: var(--env-type-title);
    text-align: start;
  }
  .env-table-region:has(> .env-table > .env-table-caption) {
    border: 0;
    border-radius: 0;
    background: none;
  }
  .env-table:has(> .env-table-caption) {
    border: var(--env-control-border-width) solid var(--env-color-border-muted);
    border-radius: var(--env-radius-lg);
    background: var(--env-table-surface);
  }
  .env-table:has(> .env-table-caption)
    .env-table-head
    > .env-table-row:first-child
    > :where(.env-table-header-cell, .env-table-cell):first-child {
    border-start-start-radius: calc(var(--env-radius-lg) - var(--env-control-border-width));
  }
  .env-table:has(> .env-table-caption)
    .env-table-head
    > .env-table-row:first-child
    > :where(.env-table-header-cell, .env-table-cell):last-child {
    border-start-end-radius: calc(var(--env-radius-lg) - var(--env-control-border-width));
  }
  .env-table:has(> .env-table-caption)
    > :last-child
    > .env-table-row:last-child
    > :where(.env-table-header-cell, .env-table-cell):first-child {
    border-end-start-radius: calc(var(--env-radius-lg) - var(--env-control-border-width));
  }
  .env-table:has(> .env-table-caption)
    > :last-child
    > .env-table-row:last-child
    > :where(.env-table-header-cell, .env-table-cell):last-child {
    border-end-end-radius: calc(var(--env-radius-lg) - var(--env-control-border-width));
  }
  .env-table-header-cell,
  .env-table-cell {
    padding: var(--env-table-cell-padding);
    text-align: start;
    vertical-align: middle;
  }
  .env-table-header-cell {
    background:
      linear-gradient(var(--env-table-band), var(--env-table-band)), var(--env-table-surface);
    color: var(--env-color-fg-muted);
    font: var(--env-type-body-sm);
    font-weight: var(--env-font-weight-medium);
    white-space: nowrap;
  }
  .env-table-region[data-sticky-header] .env-table-head .env-table-header-cell {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--env-z-raised);
  }
  .env-table-body > .env-table-row + .env-table-row > :is(.env-table-cell, .env-table-header-cell) {
    border-block-start: 1px solid var(--env-table-divider);
  }
  .env-table-body .env-table-header-cell {
    background: transparent;
    color: var(--env-color-fg-default);
    font: inherit;
    font-weight: var(--env-font-weight-medium);
    white-space: normal;
  }
  .env-table :is(.env-table-cell, .env-table-header-cell)[data-align='end'] {
    text-align: end;
  }
  .env-table :is(.env-table-cell, .env-table-header-cell)[data-numeric] {
    font-variant-numeric: tabular-nums;
  }
  .env-table:not([data-fixed-layout]) .env-table-cell[data-numeric] {
    white-space: nowrap;
  }
  .env-table :is(.env-table-cell, .env-table-header-cell)[data-nowrap] {
    white-space: nowrap;
  }
  .env-table-cell > .env-text:where([data-variant='caption']),
  .env-table-cell-content > .env-text:where([data-variant='caption']) {
    margin-block-start: calc(var(--env-space-1) / 2);
  }
  .env-table-cell .env-text:where([data-variant='caption']) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
  }
  .env-table-cell a[href][data-variant='text'] {
    --env-color-fg-link: currentColor;
    --env-color-fg-link-hover: currentColor;
    --env-color-fg-link-pressed: currentColor;
  }
  .env-table-row[data-interactive] {
    transition: background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-table-row[data-interactive]:is(:hover, :focus-within) {
    --env-avatar-group-ring-tint: var(--env-color-bg-row-hover);
    background: var(--env-color-bg-row-hover);
  }
  .env-table-row[data-interactive]:not([aria-selected='true']):is(:hover, :focus-within) {
    --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-table-row[aria-selected='true'] {
    --env-color-fg-link: var(--env-color-fg-on-selected);
    --env-color-fg-link-hover: var(--env-color-fg-on-selected);
    --env-color-fg-link-pressed: var(--env-color-fg-on-selected);
    --env-color-fg-danger-hover: var(--env-color-fg-danger);
    --env-color-fg-danger-pressed: var(--env-color-fg-danger);
    --env-table-selection-bar: var(--env-color-fg-on-selected);
    --env-table-selected: color-mix(
      in oklab,
      var(--env-color-bg-selected) var(--env-table-selected-weight, 100%),
      var(--env-table-surface)
    );
    --env-avatar-group-ring-tint: var(--env-table-selected);
    --env-badge-underlay: var(--env-table-surface);
    background: var(--env-table-selected);
  }
  .env-table-row[aria-selected='true'][data-interactive]:is(:hover, :focus-within) {
    --env-avatar-group-ring-tint: var(--env-color-bg-selected-hover);
    background: var(--env-color-bg-selected-hover);
  }
  .env-table-row[aria-selected='true']:not(:has(> :first-child input[type='checkbox']))
    > :where(.env-table-header-cell, .env-table-cell):first-child {
    box-shadow: inset 3px 0 0 var(--env-table-selection-bar);
  }
  .env-table-row[aria-selected='true']:not(:has(> :first-child input[type='checkbox']))
    > :where(.env-table-header-cell, .env-table-cell):first-child:dir(rtl) {
    box-shadow: inset -3px 0 0 var(--env-table-selection-bar);
  }
  .env-table-header-cell[data-sortable] {
    padding: 0;
  }
  .env-table-sort-button {
    --env-table-sort-ring-inset: 0.125rem;
    --env-table-sort-start-radius: var(--env-radius-sm);
    --env-table-sort-end-radius: var(--env-radius-sm);
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--env-space-1);
    inline-size: 100%;
    margin: 0;
    padding: var(--env-table-cell-padding);
    border: 0;
    border-radius: var(--env-radius-sm);
    border-start-start-radius: var(--env-table-sort-start-radius);
    border-start-end-radius: var(--env-table-sort-end-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    transition: color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-table-header-cell[data-align='end'] .env-table-sort-button {
    flex-direction: row-reverse;
  }
  .env-table-sort-button:hover {
    color: var(--env-color-fg-default);
  }
  .env-table-sort-button:hover .env-icon {
    color: inherit;
  }
  .env-table-head .env-table-row:first-child > :first-child .env-table-sort-button {
    --env-table-sort-start-radius: calc(var(--env-radius-lg) - 0.0625rem);
  }
  .env-table-head .env-table-row:first-child > :last-child .env-table-sort-button {
    --env-table-sort-end-radius: calc(var(--env-radius-lg) - 0.0625rem);
  }
  .env-table-sort-button:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
  .env-table-sort-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: var(--env-table-sort-ring-inset);
    border: calc(2 * var(--env-control-border-width)) solid var(--env-color-border-focus);
    border-start-start-radius: calc(
      var(--env-table-sort-start-radius) - var(--env-table-sort-ring-inset)
    );
    border-start-end-radius: calc(
      var(--env-table-sort-end-radius) - var(--env-table-sort-ring-inset)
    );
    border-end-start-radius: calc(var(--env-radius-sm) - var(--env-table-sort-ring-inset));
    border-end-end-radius: calc(var(--env-radius-sm) - var(--env-table-sort-ring-inset));
    pointer-events: none;
  }
  .env-table-sort-button .env-icon {
    color: var(--env-color-fg-muted);
    transition: opacity var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  @media (hover: hover) {
    .env-table-header-cell[aria-sort='none'] .env-table-sort-button .env-icon {
      opacity: 0;
    }
    .env-table-head .env-table-row:hover .env-table-sort-button .env-icon,
    .env-table-header-cell .env-table-sort-button:focus-visible .env-icon {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .env-table-sort-button .env-icon {
      transition: none;
    }
  }
  .env-table-header-cell:is([aria-sort='ascending'], [aria-sort='descending']) {
    color: var(--env-color-fg-default);
  }
  .env-table-header-cell:is([aria-sort='ascending'], [aria-sort='descending'])
    .env-table-sort-button
    .env-icon {
    color: inherit;
  }
  .env-table-header-label {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .env-table[data-fixed-layout] {
    table-layout: fixed;
  }
  .env-table[data-fixed-layout] :is(.env-table-cell, .env-table-body .env-table-header-cell) {
    overflow-wrap: break-word;
  }
  .env-table[data-fixed-layout] :is(.env-table-cell, .env-table-header-cell)[data-nowrap] {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .env-table-header-cell[data-resizable] {
    position: relative;
  }
  .env-table-head .env-table-row:hover .env-table-column-resize-handle::after {
    background: var(--env-color-border-muted);
  }
  .env-table[data-resizing] {
    cursor: col-resize;
    -webkit-user-select: none;
    user-select: none;
  }
  @media (pointer: coarse) {
    .env-table-sort-button {
      min-block-size: var(--env-control-height-touch);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .env-table-row[data-interactive],
    .env-table-sort-button {
      transition: none;
    }
  }
  .env-table-cell-label {
    display: none;
  }
  @container env-table (width < 37.5em) {
    .env-table-region[data-narrow-layout='stack'] .env-table:has(> .env-table-caption) {
      border: 0;
      background: none;
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table:has(> .env-table-caption)
      > .env-table-body {
      overflow: clip;
      border: var(--env-control-border-width) solid var(--env-color-border-muted);
      border-radius: var(--env-radius-lg);
      background: var(--env-table-surface);
    }
  }
  .env-table-region[data-narrow-layout='stack'] {
    container: env-table / inline-size;
    inline-size: 100%;
    font-size: calc(var(--env-table-stack-below) / 37.5);
  }
  @container env-table (width < 37.5em) {
    .env-table-region[data-narrow-layout='stack'] .env-table {
      --env-table-stacked: 1;
    }
    .env-table-region[data-narrow-layout='stack']
      :is(
        .env-table,
        .env-table-body,
        .env-table-row,
        .env-table-cell,
        .env-table-header-cell,
        .env-table-caption
      ) {
      display: block;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-head:not(:focus-within) {
      --env-table-head-hidden-size: 0.0625rem;
      position: absolute;
      inline-size: var(--env-table-head-hidden-size);
      block-size: var(--env-table-head-hidden-size);
      margin: calc(-1 * var(--env-table-head-hidden-size));
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-head:focus-within {
      display: block;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-head .env-table-row {
      display: flex;
      flex-wrap: wrap;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-head .env-table-header-cell {
      display: block;
      flex: 1 1 auto;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-column-resize-handle {
      display: none;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-body > .env-table-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      column-gap: var(--env-space-4);
      padding: var(--env-table-cell-padding);
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-body > .env-table-row::after {
      content: '';
      flex: 0 0 100%;
      order: 1;
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table-body
      > .env-table-row
      + .env-table-row {
      border-block-start: 1px solid var(--env-table-divider);
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table-body
      > .env-table-row
      > :is(.env-table-cell, .env-table-header-cell) {
      flex: 0 0 auto;
      min-inline-size: 0;
      max-inline-size: 100%;
      padding: 0;
      border-block-start: 0;
      text-align: start;
      white-space: normal;
      overflow-wrap: break-word;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-body > .env-table-row > :first-child {
      flex: 1 1 auto;
      color: var(--env-color-fg-default);
      font-weight: var(--env-font-weight-medium);
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table-body
      > .env-table-row
      > .env-table-cell[data-labelled]:not(:first-child + *) {
      flex: 0 0 calc((100% - var(--env-space-4)) / 2);
      order: 2;
      margin-block-start: var(--env-space-3);
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table-body
      > .env-table-row
      > :first-child
      + .env-table-cell[data-labelled]
      > .env-table-cell-label {
      display: none;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-cell-content {
      min-inline-size: 0;
    }
    .env-table-region[data-narrow-layout='stack'] .env-table-cell-label {
      display: block;
      min-inline-size: 0;
      color: var(--env-color-fg-muted);
      font: var(--env-type-body-sm);
      overflow-wrap: break-word;
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table-row[aria-selected='true']:not(:has(> :first-child input[type='checkbox'])) {
      box-shadow: inset 3px 0 0 var(--env-table-selection-bar);
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table-row[aria-selected='true']:not(:has(> :first-child input[type='checkbox'])):dir(
        rtl
      ) {
      box-shadow: inset -3px 0 0 var(--env-table-selection-bar);
    }
    .env-table-region[data-narrow-layout='stack']
      .env-table-row[aria-selected='true']
      > :first-child {
      box-shadow: none;
    }
  }
  @media (forced-colors: active) {
    .env-table-row[aria-selected='true'] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
    .env-table-sort-button:focus-visible::after {
      border-color: CanvasText;
    }
  }
  @supports (animation-timeline: scroll()) {
    .env-table-region:not(:focus-visible) {
      --env-table-fade-start: 0;
      --env-table-fade-end: 0;
      mask-image: linear-gradient(
        to right,
        transparent,
        var(--env-color-fg-default) var(--env-table-fade-start),
        var(--env-color-fg-default) calc(100% - var(--env-table-fade-end)),
        transparent
      );
      animation: env-table-edge-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }
  @keyframes env-table-edge-fade {
    0% {
      --env-table-fade-start: 0;
      --env-table-fade-end: 0.75rem;
    }
    5%,
    95% {
      --env-table-fade-start: 0.75rem;
      --env-table-fade-end: 0.75rem;
    }
    100% {
      --env-table-fade-start: 0.75rem;
      --env-table-fade-end: 0;
    }
  }
  [data-env-skeleton] .env-table-head .env-table-header-cell {
    background-image:
      var(--env-skeleton-overlay), linear-gradient(var(--env-table-band), var(--env-table-band));
  }
  [data-env-skeleton]:not(env-none) .env-table-head .env-table-sort-button {
    --env-skeleton-shape: 0;
    background: transparent;
  }
  [data-env-skeleton]:not(env-none) .env-table-head .env-table-sort-button > * {
    visibility: visible;
  }
  [data-env-skeleton]:not(env-none) .env-table-head .env-table-sort-button > .env-icon {
    visibility: hidden;
  }
  [data-env-skeleton] .env-table-row[aria-selected='true'] {
    --env-table-selection-bar: transparent;
    --env-avatar-group-ring-tint: transparent;
    background: transparent;
  }
  [data-env-skeleton] .env-table-cell {
    --env-skeleton-placeholder: inline-block;
    --env-skeleton-length: 6rem;
  }
}
