@layer env.components {
  @property --env-tabs-container {
    syntax: '*';
    inherits: false;
  }
  @property --env-tabs-content {
    syntax: '*';
    inherits: false;
  }
  @property --env-tabs-selected-content {
    syntax: '*';
    inherits: false;
  }
  @property --env-tabs-indicator {
    syntax: '*';
    inherits: false;
  }
  .env-tabs {
    --env-tabs-indicator-size: calc(3 * var(--env-control-border-width));
    --env-tabs-rail-color: var(--env-tabs-container, transparent);
    --env-tabs-label-color: var(--env-tabs-content, var(--env-color-fg-muted-hover));
    --env-tabs-selected-color: var(--env-tabs-selected-content, var(--env-color-fg-primary));
    --env-tabs-indicator-color: var(--env-tabs-indicator, var(--env-color-border-primary-emphasis));
  }
  .env-tabs-list {
    --env-tabs-rail: var(--env-control-height-lg);
    --env-tabs-height: var(--env-tabs-rail);
    --env-tabs-inset: 0rem;
    --env-tabs-active-padding: var(--env-space-3);
    --env-control-height: var(--env-tabs-height);
    inline-size: fit-content;
    max-inline-size: 100%;
    overflow: auto;
    scrollbar-width: thin;
    position: relative;
  }
  .env-tabs-list:not([data-orientation='vertical']) {
    --env-tabs-lead: var(--env-space-3);
    margin-inline-start: calc(-1 * var(--env-tabs-lead));
    padding-inline-start: calc(var(--env-tabs-inset) + var(--env-tabs-lead));
    max-inline-size: calc(100% + var(--env-tabs-lead));
    pointer-events: none;
  }
  .env-tabs-list:not([data-orientation='vertical']):has(
      > .env-tabs-tab:first-child[data-variant='text']
    ) {
    --env-tabs-lead: var(--env-space-1);
  }
  .env-tabs-list:not([data-orientation='vertical']) > * {
    pointer-events: auto;
  }
  .env-tabs-list.env-surface {
    --env-surface-color: var(--env-tabs-rail-color, transparent);
    --env-surface-padding: var(--env-tabs-inset);
    --env-surface-radius: 0rem;
  }
  @media (pointer: coarse) {
    .env-tabs-list {
      --env-tabs-height: max(var(--env-tabs-rail), var(--env-control-height-touch));
    }
    .env-tabs-list:not([data-orientation='vertical']) {
      --env-button-touch-height: 0rem;
    }
    .env-tabs-list:not([data-orientation='vertical']) > .env-tabs-tab {
      position: relative;
      min-inline-size: var(--env-control-height-touch);
    }
    .env-tabs-list:not([data-orientation='vertical']) > .env-tabs-tab::before {
      content: '';
      position: absolute;
      inset-block: calc(-1 * var(--env-tabs-inset));
      inset-inline: 0;
    }
  }
  .env-tabs-list[data-orientation='vertical'] {
    --env-tabs-rail: var(--env-control-height-md);
  }
  .env-tabs-list[data-size='sm'] {
    --env-tabs-rail: var(--env-control-height-sm);
  }
  .env-tabs-list[data-size='md'] {
    --env-tabs-rail: var(--env-control-height-md);
  }
  .env-tabs-list[data-size='sm'] > .env-tabs-tab {
    padding-block: 0;
  }
  .env-tabs-list > .env-tabs-tab[data-variant='text'] {
    --env-tabs-tab-padding: var(--env-space-1);
    margin-inline: 0;
    max-inline-size: 100%;
  }
  .env-tabs-list > .env-tabs-tab {
    --env-tabs-tab-padding: var(--env-space-3);
    --env-tabs-press-layer: color-mix(
      in srgb,
      var(--env-color-bg-neutral-subtle-hover) 70%,
      transparent
    );
    position: relative;
    flex-shrink: 0;
    border-radius: var(--env-radius-sm);
    white-space: normal;
    overflow-wrap: break-word;
    transition: color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-tabs-list > .env-tabs-tab,
  .env-tabs-list > .env-tabs-tab:is(:disabled, [aria-disabled='true']),
  .env-tabs-list
    > .env-tabs-tab:is(:hover, :active, :focus-visible):not(:disabled):not([aria-disabled='true']) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--env-tabs-label-color, var(--env-color-fg-muted-hover));
  }
  .env-tabs-list > .env-tabs-tab:is(:disabled, [aria-disabled='true']) {
    color: var(--env-color-fg-disabled);
  }
  .env-tabs-list
    > .env-tabs-tab:is(:hover, :active):not([data-active]):not(:disabled):not(
      [aria-disabled='true']
    ) {
    color: var(--env-tabs-content, var(--env-color-fg-default));
  }
  .env-tabs-list > .env-tabs-tab:active:not(:disabled):not([aria-disabled='true']) {
    background: var(--env-tabs-press-layer);
  }
  .env-tabs-list > .env-tabs-tab[data-active],
  .env-tabs-list
    > .env-tabs-tab[data-active]:is(:hover, :active, :focus-visible):not(:disabled):not(
      [aria-disabled='true']
    ) {
    color: var(--env-tabs-selected-color, var(--env-color-fg-primary));
  }
  .env-tabs-list > .env-tabs-tab::after {
    content: '';
    position: absolute;
    inset-inline: var(--env-tabs-tab-padding);
    inset-block-end: 0;
    block-size: var(--env-tabs-indicator-size);
    border-start-start-radius: var(--env-tabs-indicator-size);
    border-start-end-radius: var(--env-tabs-indicator-size);
    background: transparent;
    pointer-events: none;
  }
  .env-tabs-list > .env-tabs-tab[data-active]::after {
    background: var(
      --env-tabs-tab-indicator,
      var(--env-tabs-indicator-color, var(--env-color-border-primary-emphasis))
    );
  }
  .env-tabs-list:has(> .env-tabs-tab[data-active][data-variant='text']) {
    --env-tabs-active-padding: var(--env-space-1);
  }
  .env-tabs-list > .env-tabs-indicator {
    --active-tab-left: 0rem;
    --active-tab-top: 0rem;
    --active-tab-width: 0rem;
    --active-tab-height: 0rem;
    --env-tabs-indicator-start: var(--env-tabs-active-padding);
    position: absolute;
    top: 0;
    left: 0;
    inline-size: calc(
      var(--active-tab-width) - var(--env-tabs-indicator-start) - var(--env-tabs-active-padding)
    );
    block-size: var(--env-tabs-indicator-size);
    border-start-start-radius: var(--env-tabs-indicator-size);
    border-start-end-radius: var(--env-tabs-indicator-size);
    background: var(--env-tabs-indicator-color, var(--env-color-border-primary-emphasis));
    translate: calc(var(--active-tab-left) + var(--env-tabs-indicator-start))
      calc(var(--active-tab-top) + var(--active-tab-height) - var(--env-tabs-indicator-size));
    pointer-events: none;
  }
  .env-tabs-list:not([data-orientation='vertical']) > .env-tabs-indicator {
    pointer-events: none;
  }
  .env-tabs-list:not([data-orientation='vertical']):has(> .env-tabs-tab:first-child[data-active])
    > .env-tabs-indicator {
    --env-tabs-indicator-start: 0rem;
  }
  .env-tabs-list > .env-tabs-indicator:dir(rtl) {
    translate: calc(var(--active-tab-left) + var(--env-tabs-active-padding))
      calc(var(--active-tab-top) + var(--active-tab-height) - var(--env-tabs-indicator-size));
  }
  .env-tabs-list:has(> .env-tabs-indicator[data-placed]) > .env-tabs-tab[data-active] {
    --env-tabs-tab-indicator: transparent;
  }
  .env-tabs-list[data-orientation='vertical'] > .env-tabs-tab {
    justify-content: flex-start;
    text-align: start;
  }
  .env-tabs-list[data-orientation='vertical'] > .env-tabs-tab::after {
    inset-block: var(--env-space-2);
    inset-inline: 0 auto;
    inline-size: var(--env-tabs-indicator-size);
    block-size: auto;
    border-radius: 0;
    border-start-end-radius: var(--env-tabs-indicator-size);
    border-end-end-radius: var(--env-tabs-indicator-size);
  }
  .env-tabs-list[data-orientation='vertical'] > .env-tabs-indicator {
    inline-size: var(--env-tabs-indicator-size);
    block-size: calc(var(--active-tab-height) - 2 * var(--env-space-2));
    border-radius: 0;
    border-start-end-radius: var(--env-tabs-indicator-size);
    border-end-end-radius: var(--env-tabs-indicator-size);
    translate: var(--active-tab-left) calc(var(--active-tab-top) + var(--env-space-2));
  }
  .env-tabs-list[data-orientation='vertical'] > .env-tabs-indicator:dir(rtl) {
    translate: calc(
        var(--active-tab-left) + var(--active-tab-width) - var(--env-tabs-indicator-size)
      )
      calc(var(--active-tab-top) + var(--env-space-2));
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-tabs-list
      > .env-tabs-indicator:is([data-activation-direction]):not(
        [data-activation-direction='none']
      ) {
      transition:
        translate var(--env-motion-duration-medium) var(--env-motion-ease),
        inline-size var(--env-motion-duration-medium) var(--env-motion-ease),
        block-size var(--env-motion-duration-medium) var(--env-motion-ease);
    }
  }
  .env-tabs-list > .env-tabs-tab:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: -2px;
  }
  .env-tabs-list:not([data-orientation='vertical']) > .env-tabs-tab:first-child {
    isolation: isolate;
    padding-inline-start: 0;
  }
  .env-tabs-list:not([data-orientation='vertical'])
    > .env-tabs-tab:first-child:focus-visible:not(:disabled):not([aria-disabled='true']) {
    outline-color: transparent;
  }
  .env-tabs-list:not([data-orientation='vertical']) > .env-tabs-tab:first-child::before {
    content: '';
    position: absolute;
    z-index: calc(var(--env-z-base) - var(--env-z-raised));
    inset-block: 0;
    inset-inline: calc(-1 * var(--env-tabs-lead)) 0;
    border-radius: inherit;
    pointer-events: none;
  }
  .env-tabs-list:not([data-orientation='vertical'])
    > .env-tabs-tab:first-child:focus-visible::before {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: -2px;
  }
  .env-tabs-list:not([data-orientation='vertical'])
    > .env-tabs-tab:first-child:active:not(:disabled):not([aria-disabled='true']) {
    background: transparent;
  }
  .env-tabs-list:not([data-orientation='vertical'])
    > .env-tabs-tab:first-child:active:not(:disabled):not([aria-disabled='true'])::before {
    background: var(--env-tabs-press-layer);
  }
  .env-tabs-list:not([data-orientation='vertical']) > .env-tabs-tab:first-child::after {
    inset-inline-start: 0;
  }
  .env-tabs-panels {
    position: relative;
  }
  .env-tabs[data-fill] {
    min-block-size: 0;
  }
  .env-tabs[data-fill] > .env-tabs-panels {
    flex: 1;
    min-block-size: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  .env-tabs[data-fill] > .env-tabs-panels > :where(.env-tabs-panel:not([hidden])) {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }
  .env-tabs-panel {
    grid-area: 1 / 1;
    min-inline-size: 0;
    opacity: 1;
    transition:
      opacity var(--env-motion-duration-medium) var(--env-motion-ease-enter),
      transform var(--env-motion-duration-medium) var(--env-motion-ease-enter);
  }
  .env-tabs-panel[hidden] {
    display: none;
  }
  .env-tabs-panel[data-starting-style] {
    opacity: 0.5;
    transform: translateY(var(--env-space-1));
  }
  .env-tabs-panel[data-ending-style] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    opacity: 0;
    pointer-events: none;
    transition: none;
  }
  .env-tabs-panel:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .env-tabs-list > .env-tabs-tab,
    .env-tabs-panel {
      transition: none;
    }
    .env-tabs-panel[data-starting-style] {
      opacity: 1;
      transform: none;
    }
  }
  @media (forced-colors: active) {
    .env-tabs-list > .env-tabs-tab[data-active] {
      forced-color-adjust: none;
      color: Highlight;
    }
    .env-tabs-list > .env-tabs-tab[data-active] :where(*) {
      color: inherit;
    }
    .env-tabs-list > .env-tabs-tab[data-active]::after {
      forced-color-adjust: none;
      background: var(--env-tabs-tab-indicator, Highlight);
    }
    .env-tabs-list > .env-tabs-indicator {
      forced-color-adjust: none;
      background: Highlight;
    }
    .env-tabs-list > .env-tabs-tab[data-active]:focus-visible {
      outline-color: CanvasText;
    }
    .env-tabs-list:not([data-orientation='vertical'])
      > .env-tabs-tab:first-child:focus-visible:not(:disabled):not([aria-disabled='true']) {
      outline-color: CanvasText;
    }
    .env-tabs-list:not([data-orientation='vertical'])
      > .env-tabs-tab:first-child:focus-visible::before {
      outline: 0;
    }
  }
}