/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-tablist {
  /**
    @prop --tab-padding:
      Padding for tabs
      - default: 0.75rem 1.25rem
  */
  --tab-padding: 0.5rem 1rem;
  /**
      @prop --tab-bg-color:
        Background color for tabs
        - default: transparent
    */
  --tab-bg-color: transparent;
  /**
      @prop --tab-hover-bg-color:
        Background color for tabs on hover
        - default: var(--go-color-neutral-200)
    */
  --tab-hover-bg-color: var(--go-color-neutral-200);
  /**
      @prop --tab-text-color:
        Text color for tabs
        - default: var(--go-color-neutral-800)
    */
  --tab-text-color: var(--go-color-neutral-800);
  /**
      @prop --tab-hover-text-color:
        Text color for tabs on hover
        - default: var(--go-color-neutral-900)
    */
  --tab-hover-text-color: var(--go-color-neutral-900);
  /**
      @prop --tab-focus-color:
        Focus outline color for tabs
        - default: var(--go-color-primary-600)
    */
  --tab-focus-color: var(--go-color-primary-600);
  /**
      @prop --tab-active-color:
        Text color for active tab
        - default: var(--go-color-primary-600)
    */
  --tab-active-color: var(--go-color-primary-600);
  /**
      @prop --tab-active-bg-color:
        Background color for active tab
        - default: transparent
    */
  --tab-active-bg-color: transparent;
  /**
      @prop --tab-border-width:
        Border width for tabs
        - default: 0.2em
    */
  --tab-border-width: 0.2em;
  /**
      @prop --tab-active-indicator-color:
        Color of the active tab indicator
        - default: var(--tab-active-color)
    */
  --tab-active-indicator-color: var(--tab-active-color);
  /**
      @prop --tabs-active-indicator-width:
        Width of the active tab indicator
        - default: 0
    */
  --tabs-active-indicator-width: 0;
  /**
      @prop --tabs-active-indicator-height:
        Height of the active tab indicator
        - default: 0.2em
    */
  --tabs-active-indicator-height: 0.2em;
  /**
      @prop --tabs-active-indicator-color:
        Color of the active tab indicator
        - default: var(--tab-active-color)
    */
  --tabs-active-indicator-color: var(--tab-active-color);
  /**
      @prop --tab-icon-gap:
        Gap between tab icons
        - default: 0.5rem
    */
  --tab-icon-gap: 0.5rem;
}
go-tablist [role=tablist] {
  overflow: auto;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  position: relative;
}
go-tablist [role=tab] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tab-icon-gap);
  padding: var(--tab-padding);
  border: var(--tab-border-width) solid transparent;
  white-space: nowrap;
  background: var(--tab-bg-color);
  color: var(--tab-text-color);
  font-weight: 500;
  transition: background-color var(--go-duration-normal) var(--go-timing-function), color var(--go-duration-normal) var(--go-timing-function);
}
@media (min-width: 600px) {
  go-tablist [role=tab] {
    flex-direction: row;
  }
}
@media (prefers-reduced-motion: reduce) {
  go-tablist [role=tab] {
    transition-duration: 0s;
  }
}
go-tablist [role=tab] .go-tab-icon-slot svg,
go-tablist [role=tab] .go-tab-icon-slot img {
  display: block;
}
go-tablist [role=tab] .go-tab-icon-active {
  display: none;
}
go-tablist [role=tab]:hover, go-tablist [role=tab]:focus {
  color: var(--tab-hover-text-color);
  background: var(--tab-hover-bg-color);
}
go-tablist [role=tab]:not(.active) {
  cursor: pointer;
}
go-tablist [role=tab][aria-selected=true] {
  background: var(--tab-active-bg-color);
  color: var(--tab-active-color);
  text-decoration: none;
}
go-tablist [role=tab][aria-selected=true].has-active-icon .go-tab-icon {
  display: none;
}
go-tablist [role=tab][aria-selected=true] .go-tab-icon-active {
  display: block;
}
go-tablist .tabs-active-indicator-track {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}
go-tablist .tabs-active-indicator-track .tabs-active-indicator {
  transition: transform var(--go-duration-normal) var(--go-timing-function), width var(--go-duration-normal) var(--go-timing-function), height var(--go-duration-normal) var(--go-timing-function);
  transform: translateX(var(--tabs-active-indicator-left));
  width: var(--tabs-active-indicator-width);
  height: var(--tabs-active-indicator-height);
  border-radius: var(--radius-round);
  background: var(--tabs-active-indicator-color);
}
@media (prefers-reduced-motion: reduce) {
  go-tablist .tabs-active-indicator-track .tabs-active-indicator {
    transition-duration: 0s;
  }
}
go-tablist.vertical {
  flex-direction: row;
}
go-tablist.vertical [role=tablist] {
  flex-direction: column;
}
go-tablist.vertical [role=tablist] .tabs-active-indicator-track {
  width: auto;
  top: 0;
  left: auto;
}
go-tablist.vertical [role=tablist] .tabs-active-indicator-track .tabs-active-indicator {
  --tabs-active-indicator-width: 0.25rem;
  transform: translateY(var(--tabs-active-indicator-top));
}
go-tablist.vertical [role=tab] {
  text-align: start;
  white-space: normal;
}
go-tablist.vertical [role=tab]:focus-visible {
  border-top-color: transparent;
  border-left-color: var(--tab-focus-color);
}
go-tablist.fill [role=tablist] {
  width: 100%;
}
go-tablist.fill [role=tab] {
  flex: 1;
}

:where([color-scheme=dark], [data-theme=dark]) go-tablist {
  --tab-text-color: var(--go-color-neutral-700);
  --tab-hover-bg-color: var(--go-color-neutral-200);
  --tab-hover-text-color: var(--go-color-darkest);
  --tab-active-color: var(--go-color-primary-800);
}