:is(.bs-tab-list, bs-tab-list) {
  --active-line-offset: 0;
  --active-line-max-width: 0;
  --active-line-scale: 0;
  --active-line-transition-duration: 300ms;
  --tab-list-opacity: 1;
  --tab-color: var(--bs-ink-light);
  --tab-cursor: pointer;
  --tab-display: inline-flex;
  --tab-justify: space-around;
  --tab-text-size: var(--bs-text-sm);
  --tab-weight: var(--bs-font-normal);
  align-items: center;
  border-bottom: 1px solid var(--bs-border-base);
  display: flex;
  font-size: var(--tab-text-size);
  height: 2.5rem;
  justify-content: var(--tab-justify);
  line-height: 1.5;
  opacity: var(--tab-list-opacity);
  position: relative;
  width: 100%;
}

:is(.bs-tab-list, bs-tab-list):where([data-resizing]:not([data-resizing="false"])) {
  --tab-list-opacity: 0;
}

@media (min-width: 752px) {
  :is(.bs-tab-list, bs-tab-list) {
    --tab-justify: flex-start;
    --tab-text-size: var(--bs-text-base);
  }
}
:is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle) {
  align-items: center;
  color: var(--tab-color, var(--bs-ink-light));
  column-gap: 0.5rem;
  cursor: var(--tab-cursor);
  display: var(--tab-display);
  flex-grow: 0;
  flex-shrink: 0;
  font-weight: var(--tab-weight, var(--bs-font-normal));
  height: 2.5rem;
  padding: 0.5rem;
  outline-color: var(--bs-blue-base);
  outline-offset: -1px;
  text-decoration: none;
}

:is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([tabindex="-1"]) {
  --tab-cursor: default;
}

:is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])) {
  --tab-display: none;
}

:is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([aria-selected]:not([aria-selected="false"])),
:is(bs-tab-list, .bs-tab-list) :where(.bs-tab-list-toggle):where([data-active]:not([data-active="false"])) {
  --tab-color: var(--bs-ink-light);
  --tab-weight: var(--bs-font-bold);
}

:where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"]) {
  display: none;
}

:where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
  display: block;
}

/* Active line */
:is(.bs-tab-list, bs-tab-list)::after {
  background-color: var(--bs-blue-base);
  bottom: 0;
  content: "";
  height: 0.25rem;
  left: 0;
  position: absolute;
  transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
  transform-origin: top left;
  transition: transform var(--active-line-transition-duration) ease-in;
  width: 100%;
}