/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-tabs {
    width: 100%;
  }
  .jkl-tablist {
    --padding-inline-end: var(--jkl-unit-50);
    --text-color: var(--jkl-color-text-interactive);
    --line-color: var(--jkl-color-border-separator);
    --indicator-color: var(--jkl-color-border-separator-hover);
    scroll-snap-type: x proximity;
    overflow: scroll hidden;
    scrollbar-width: none;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--line-color);
    width: fit-content;
    max-width: 100%;
  }
  @media screen and (forced-colors: active) {
    .jkl-tablist {
      border-color: GrayText;
    }
  }
  .jkl-tablist::-webkit-scrollbar {
    display: none;
  }
  @supports (position-anchor: --active-tab) {
    .jkl-tablist::after {
      content: "";
      position: absolute;
      position-anchor: --active-tab;
      height: 2px;
      width: calc(anchor-size(inline) - var(--padding-inline-end));
      inset-block-start: calc(anchor(end) - 2px);
      inset-inline-start: calc(anchor(--active-tab start));
      background-color: var(--indicator-color);
      transition-timing-function: ease;
      transition-duration: 400ms;
    }
  }
  .jkl-tab {
    --padding-inline-end: var(--jkl-unit-50);
    font-size: var(--jkl-font-size-3);
    line-height: var(--jkl-line-height-tight);
    font-weight: 400;
    --jkl-icon-weight: 300;
    color: var(--text-color);
    padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
    border: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    scroll-margin-inline-start: var(--jkl-unit-20);
    scroll-snap-align: start;
    text-decoration: none;
    white-space: nowrap;
  }
  .jkl-tab {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-tab {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-tab:hover {
    --text-color: var(--jkl-color-text-interactive-hover);
  }
  .jkl-tab:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: -2px;
  }
  .jkl-tab[aria-selected=true] {
    anchor-name: --active-tab;
    --jkl-icon-weight: 400;
    font-weight: 700;
    letter-spacing: -0.014em;
  }
  @supports not (position-anchor: --active-tab) {
    .jkl-tab[aria-selected=true] {
      position: relative;
    }
    .jkl-tab[aria-selected=true]::after {
      content: "";
      position: absolute;
      height: 2px;
      width: calc(100% - var(--padding-inline-end));
      inset-block-end: 0;
      inset-inline-start: 0;
      background-color: var(--indicator-color);
      transition-timing-function: ease;
      transition-duration: 400ms;
    }
  }
}