@layer web-module-accessible-tabs {
  [data-accessible-tabs] {
    --tabs-accent: Highlight;
    --tabs-border: color-mix(in srgb, CanvasText 24%, transparent);
    --tabs-muted: color-mix(in srgb, CanvasText 72%, Canvas);
    color: CanvasText;
  }

  [data-accessible-tabs] [role="tablist"] {
    border-block-end: 1px solid var(--tabs-border);
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  [data-accessible-tabs] [role="tab"] {
    appearance: none;
    background: transparent;
    border: 0;
    border-block-end: 0.2rem solid transparent;
    color: var(--tabs-muted);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    padding: 0.75rem 1rem;
  }

  [data-accessible-tabs] [role="tab"][aria-selected="true"] {
    border-block-end-color: var(--tabs-accent);
    color: CanvasText;
  }

  [data-accessible-tabs] [role="tab"]:focus-visible {
    outline: 0.15rem solid var(--tabs-accent);
    outline-offset: -0.25rem;
  }

  [data-accessible-tabs] [role="tab"][aria-disabled="true"],
  [data-accessible-tabs] [role="tab"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  [data-accessible-tabs] [role="tabpanel"] {
    padding-block: clamp(1rem, 3vw, 2rem);
  }

  [data-accessible-tabs] [role="tabpanel"][hidden] {
    display: none;
  }

  @media (forced-colors: active) {
    [data-accessible-tabs] [role="tab"] {
      border-color: transparent;
      color: ButtonText;
      forced-color-adjust: auto;
    }

    [data-accessible-tabs] [role="tab"][aria-selected="true"] {
      border-color: Highlight;
    }
  }
}