:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
   * @prop --border: The border of the tab group. Defaults to `2px solid var(--nano-color-neutral-300)`.
   * @prop --indicator-transition: The time it takes for the indicator to transition. Defaults to `var(--nano-transition-fast)`.
   * @prop --indicator-color: The color of the indicator. Defaults to `var(--nano-color-primary-1000)`.
   * @prop --indicator-track-color: The color of the indicator track. Defaults to `var(--nano-color-neutral-300)`.
   * @prop --indicator-size: The size of the indicator. Defaults to `0`.
   * @prop --fade-transparency: The transparency of the fade effect. Defaults to `0`.
   * @prop --tab-spacing: The spacing between tabs. Defaults to `var(--nano-spacing-md)`.
   * @prop --content-spacing: The spacing around the content area. Defaults to `var(--nano-spacing-l1-default)`.
   */
  --border: 2px solid var(--nano-color-neutral-300);
  --indicator-transition: var(--nano-transition-fast);
  --indicator-color: var(--nano-color-primary-1000);
  --indicator-track-color: var(--nano-color-neutral-300);
  --indicator-size: 0;
  --tab-spacing: var(--nano-spacing-md);
  --content-spacing: var(--nano-spacing-l1-default);
  display: block;
  position: relative;
  z-index: var(--nano-z-index-raised);
}

.group {
  display: flex;
  border-radius: 0;
  inline-size: 100%;
  flex: inherit;
}

:host([equal-tab-size]) .group__tabs-border,
.group__tabs[has-scroll-controls] .group__tabs-border {
  display: none;
}

.group__tabs::part(items) {
  gap: var(--tab-spacing);
}

.group--top {
  flex-direction: column;
}
.group--top .group__tabs {
  --fade-size: 100px;
}
.group--top .group__tabs::part(items) {
  align-items: flex-end;
}
.group--top .group__tabs-border {
  flex: 1;
  border-block-end: var(--border);
}
.group--top .group__body {
  order: 2;
  position: relative;
  flex: 1 1 auto;
  border-block-end: var(--border);
  padding-block: var(--content-spacing);
}

.group--start {
  flex-direction: row;
}
:host([equal-tab-size]) .group--start .group__tabs::part(items) {
  display: grid;
  grid-auto-rows: 1fr;
}
.group--start .group__tabs-border {
  flex: 1;
  border-inline-end: var(--border);
}
.group--start .group__body {
  flex: 1 1 auto;
  order: 2;
  overflow: hidden;
  padding-inline-start: var(--content-spacing);
}