/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-tabs {
  --tab-padding: 0.75rem 1.25rem;
  --tab-bg-color: transparent;
  --tab-hover-bg-color: var(--go-color-neutral-200);
  --tab-text-color: var(--go-color-neutral-700);
  --tab-focus-color: var(--go-color-primary-600);
  --tab-active-color: var(--go-color-primary-800);
  --tab-active-bg-color: transparent;
  --tab-border-width: 0.2em;
  --tab-active-indicator-color: var(--tab-active-color);
  --tabs-active-indicator-width: 0;
  --tabs-active-indicator-height: 0.2em;
  --tabs-active-indicator-color: var(--tab-active-color);
  --tabs-vertical-tablist-max-width: 25%;
  --tabs-tablist-gap: 1rem;
}
go-tabs.vertical {
  display: grid;
  grid-template-columns: minmax(-webkit-min-content, var(--tabs-vertical-tablist-max-width)) 1fr;
  grid-template-columns: minmax(min-content, var(--tabs-vertical-tablist-max-width)) 1fr;
  gap: var(--tabs-tablist-gap);
}
go-tabs.vertical [role=tablist] .tabs-active-indicator-track {
  width: auto;
  top: 0;
  left: auto;
}
go-tabs.vertical [role=tablist] .tabs-active-indicator-track .tabs-active-indicator {
  --tabs-active-indicator-width: 0.25rem;
  transform: translateY(var(--tabs-active-indicator-top));
}
go-tabs.vertical [role=tab] {
  text-align: start;
  white-space: normal;
}
go-tabs.vertical [role=tab]:focus-visible {
  border-top-color: transparent;
  border-left-color: var(--tab-focus-color);
}