[data-component="tabs"] {
  position: relative;
}

[data-tabs="menu"] {
  position: relative;

  [data-tabs="menu-dropdown-toggle"] {
    width: 100%;
    padding: var(--button--vertical-padding) var(--button--horizontal-padding);
    border: 1px solid var(--_site-theme---tabs--menu-toggle-border);
    border-radius: var(--button--border-radius);
    background-color: var(--_site-theme---tabs--menu-toggle-background);
    font-size: var(--button--font-size);
    line-height: var(--button--line-height);
    letter-spacing: var(--button--letter-spacing);
    display: none;
    justify-content: space-between;
    align-items: center;

    &[aria-expanded="true"] {
      border-radius: var(--button--border-radius) var(--button--border-radius) 0 0;

      [data-tabs="menu-dropdown-arrow"] {
        transform: rotate(180deg);
      }
    }
  }

  [data-slot="tabs-menu"] {
    display: flex;
    scrollbar-width: none;
    flex-flow: row;
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: auto;

    &[data-variant="vertical"] {
      flex-flow: column;
      overflow-x: hidden;
    }
  }
}

[data-tabs="link"] {
  position: relative;
  flex: 1 0 auto;
  padding: .7em 1em;
  border-bottom: 2px solid var(--_site-theme---tabs--link-border);
  background-color: var(--_site-theme---tabs--link-background);
  color: var(--_site-theme---tabs--link-text);
  transition: background-color .3s cubic-bezier(.165, .84, .44, 1),
              border-color .3s cubic-bezier(.165, .84, .44, 1),
              color .3s cubic-bezier(.165, .84, .44, 1);

  &:hover {
    color: var(--_site-theme---tabs--link-hover-text);
  }

  &[aria-selected="true"] {
    border-bottom-color: var(--_site-theme---tabs--link-active-border);
    color: var(--_site-theme---tabs--link-active-text);
    background-color: var(--_site-theme---tabs--link-active-background);
  }

  [data-tabs="link-progress"] {
    position: absolute;
    inset: auto 0% -2px;
    width: 0%;
    height: 2px;
    background-color: var(--_site-theme---tabs--progress-background);
    &.wf-empty { padding: 0px; }
  }
}

[data-tabs="pane"] {
  animation: tabsFadeIn .5s ease;

  &[aria-hidden="true"] { display: none; }

  html.wf-design-mode &:has(+&) {
    margin-bottom: var(--grid--gap-main);
  }
}

@keyframes tabsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-tabs="autoplay-toggle"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--_site-theme---tabs--toggle-border);
  border-radius: .5rem;
  background-color: var(--_site-theme---tabs--toggle-background);
  transition: opacity .3s cubic-bezier(.165, .84, .44, 1);

  &:hover {
    background-color: var(--_site-theme---tabs--toggle-hover-background);
  }

  &:focus-visible, &[data-wf-focus-visible] {
    outline: 2px solid var(--_site-theme---focus-outline);
    outline-offset: 2px;
  }

  [data-tabs-autoplay-state="pause"] {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  [data-tabs-autoplay-state="play"] {
    display: none;
    justify-content: center;
    align-items: center;
  }
}

[data-tabs="menu-wrapper"][data-variant="vertical"] [data-tabs="link"] {
  border-bottom: none;
  border-left: 2px solid var(--_site-theme---tabs--link-border);
}
[data-tabs="menu-wrapper"][data-variant="vertical"] [data-tabs="link"][aria-selected="true"] {
  border-color: var(--_site-theme---tabs--link-active-border);
}
[data-tabs="menu-wrapper"][data-variant="vertical"] [data-tabs="link-progress"] {
  inset: 0 auto 0 -2px;
  width: 2px;
  height: 0%;
}

[data-tabs="menu"][data-tabs-autoplay="true"] [data-tabs="link"][aria-selected="true"] [data-tabs="link-progress"] {
  animation: autoplayProgress var(--autoplay-duration, 5s) linear forwards;
}
[data-component="tabs"][data-tabs-state="paused"] [data-tabs="menu"][data-tabs-autoplay="true"] [data-tabs="link"][aria-selected="true"] [data-tabs="link-progress"] {
  animation-play-state: paused;
}
@keyframes autoplayProgress {
  from { width: 0%; }
  to { width: 100%; }
}

[data-tabs="menu"][data-tabs-autoplay="true"] [data-tabs="menu-wrapper"][data-variant="vertical"] [data-tabs="link"][aria-selected="true"] [data-tabs="link-progress"] {
  animation: autoplayProgressVertical var(--autoplay-duration, 5s) linear forwards;
}
[data-component="tabs"][data-tabs-state="paused"] [data-tabs="menu"][data-tabs-autoplay="true"] [data-tabs="menu-wrapper"][data-variant="vertical"] [data-tabs="link"][aria-selected="true"] [data-tabs="link-progress"] {
  animation-play-state: paused;
}
@keyframes autoplayProgressVertical {
  from { height: 0%; }
  to { height: 100%; }
}

[data-component="tabs"][data-tabs-state="paused"] [data-tabs-autoplay-state="pause"] { display: none; }
[data-component="tabs"][data-tabs-state="paused"] [data-tabs-autoplay-state="play"] { display: flex; }

@media (max-width: 767px) {
  [data-tabs="menu"][data-tabs-mobile-dropdown="true"] [data-tabs="menu-dropdown-toggle"] {
    display: flex;
  }
  [data-tabs="menu"][data-tabs-mobile-dropdown="true"] [data-tabs="menu-dropdown-menu"] {
    display: none;
    position: absolute;
    inset: calc(100% - 1px) 0 auto 0;
    background: var(--_site-theme---tabs--menu-toggle-background);
    border: 1px solid var(--_site-theme---tabs--menu-toggle-border);
    border-radius: 0 0 var(--button--border-radius) var(--button--border-radius);
    z-index: 10;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  [data-tabs="menu"][data-tabs-mobile-dropdown="true"] [data-tabs="menu-dropdown-menu"][data-tabs-state="open"] {
    display: block;
  }
  [data-tabs="menu"][data-tabs-mobile-dropdown="true"] [data-slot="tabs-menu"] {
    display: flex;
    flex-direction: column;
  }
  [data-tabs="menu"][data-tabs-mobile-dropdown="true"] [data-tabs="link"] {
    border: none;
  }
  [data-tabs="menu"][data-tabs-mobile-dropdown="true"] [data-tabs="link"][aria-selected="true"] {
    background-color: var(--_site-theme---tabs--link-active-background);
  }
}