/* =========================================================
   GLOBAL
   Nur neutrale Variablen
   ========================================================= */

[data-tabs] {
  min-width: 0;
}

[data-tabs-menu] {
  --tabs-left-bleed: 0px;
  --tabs-right-bleed: 0px;

  --tabs-line-start: 0px;
  --tabs-line-width: 100%;

  --tabs-fade-width:
    var(--component-library---space--64, 4rem);
}


/* =========================================================
   STANDARD
   Kein data-tabs-horizontal
   → immer horizontal
   ========================================================= */

[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu] {
  box-sizing: border-box;

  display: flex;
  flex-flow: row nowrap;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin-left: 0;
  margin-right: 0;

  padding-left: 0;
  padding-right: 0;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  overscroll-behavior-inline: contain;
  scroll-snap-type: none;

  -webkit-mask-image: none;
  mask-image: none;

  border-bottom: none;

  /* Linie */
  background-image:
    linear-gradient(
      var(
        --component-library---color--border--default,
        var(--color--border--default, rgba(0,0,0,0.14))
      ),
      var(
        --component-library---color--border--default,
        var(--color--border--default, rgba(0,0,0,0.14))
      )
    );

  background-repeat: no-repeat;

  background-size:
    var(--tabs-line-width)
    1px;

  background-position:
    var(--tabs-line-start)
    100%;
}


/* Scrollbar */
[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu]::-webkit-scrollbar {
  display: none;
}


/* Tab Links */
[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu] > .w-tab-link {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* =========================================================
   STANDARD – FULL BLEED
   ========================================================= */

[data-tabs]:not([data-tabs-horizontal]).is-tabs-full-bleed
[data-tabs-menu] {
  width: calc(
    100%
    + var(--tabs-left-bleed)
    + var(--tabs-right-bleed)
  );

  max-width: none;

  margin-left:
    calc(-1 * var(--tabs-left-bleed));

  margin-right:
    calc(-1 * var(--tabs-right-bleed));
}


/* erster Tab bleibt initial an Containerkante */
[data-tabs]:not([data-tabs-horizontal]).is-tabs-full-bleed
[data-tabs-menu] > .w-tab-link:first-child {
  margin-left:
    var(--tabs-left-bleed);
}


/* =========================================================
   STANDARD – STICKY
   top weiterhin aus Webflow
   ========================================================= */

[data-tabs]:not([data-tabs-horizontal])[data-tabs-sticky="true"]
[data-tabs-menu] {
  position: sticky;

  z-index: 20;

  background-color:
    var(
      --component-library---color--surface--background,
      var(--color--surface--background, #fff)
    );
}


/* =========================================================
   STANDARD – FADES
   ========================================================= */

[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu]::before,

[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu]::after {
  content: "";

  position: sticky;
  top: 0;

  flex: 0 0 var(--tabs-fade-width);
  width: var(--tabs-fade-width);

  align-self: stretch;

  min-height: 3rem;

  pointer-events: none;

  z-index: 10;

  opacity: 0;

  transition:
    opacity 150ms ease;
}


/* linker Fade */
[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu]::before {
  left: 0;

  margin-right:
    calc(-1 * var(--tabs-fade-width));

  background:
    linear-gradient(
      to right,
      var(
        --component-library---color--surface--background,
        var(--color--surface--background, #fff)
      ),
      transparent
    );
}


/* rechter Fade */
[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu]::after {
  right: 0;

  margin-left:
    calc(-1 * var(--tabs-fade-width));

  background:
    linear-gradient(
      to right,
      transparent,
      var(
        --component-library---color--surface--background,
        var(--color--surface--background, #fff)
      )
    );
}


/* Fade States */
[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu].has-scroll-left::before {
  opacity: 1;
}

[data-tabs]:not([data-tabs-horizontal])
[data-tabs-menu].has-scroll-right::after {
  opacity: 1;
}


/* =========================================================
   TABLET DOWN
   Desktop = Webflow
   <= 991px = horizontal
   ========================================================= */

@media screen and (max-width: 991px) {

  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu] {
    box-sizing: border-box;

    display: flex;
    flex-flow: row nowrap;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-left: 0;
    margin-right: 0;

    padding-left: 0;
    padding-right: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    overscroll-behavior-inline: contain;
    scroll-snap-type: none;

    -webkit-mask-image: none;
    mask-image: none;

    border-bottom: none;

    /* Linie */
    background-image:
      linear-gradient(
        var(
          --component-library---color--border--default,
          var(--color--border--default, rgba(0,0,0,0.14))
        ),
        var(
          --component-library---color--border--default,
          var(--color--border--default, rgba(0,0,0,0.14))
        )
      );

    background-repeat: no-repeat;

    background-size:
      var(--tabs-line-width)
      1px;

    background-position:
      var(--tabs-line-start)
      100%;
  }


  /* Scrollbar */
  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu]::-webkit-scrollbar {
    display: none;
  }


  /* Tab Links */
  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu] > .w-tab-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }


  /* =======================================================
     FULL BLEED
     ======================================================= */

  [data-tabs][data-tabs-horizontal="tablet-down"].is-tabs-full-bleed
  [data-tabs-menu] {
    width: calc(
      100%
      + var(--tabs-left-bleed)
      + var(--tabs-right-bleed)
    );

    max-width: none;

    margin-left:
      calc(-1 * var(--tabs-left-bleed));

    margin-right:
      calc(-1 * var(--tabs-right-bleed));
  }


  [data-tabs][data-tabs-horizontal="tablet-down"].is-tabs-full-bleed
  [data-tabs-menu] > .w-tab-link:first-child {
    margin-left:
      var(--tabs-left-bleed);
  }


  /* =======================================================
     STICKY
     top kommt aus Webflow
     ======================================================= */

  [data-tabs][data-tabs-horizontal="tablet-down"][data-tabs-sticky="true"]
  [data-tabs-menu] {
    position: sticky;

    z-index: 20;

    background-color:
      var(
        --component-library---color--surface--background,
        var(--color--surface--background, #fff)
      );
  }


  /* =======================================================
     FADES
     ======================================================= */

  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu]::before,

  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu]::after {
    content: "";

    position: sticky;
    top: 0;

    flex: 0 0 var(--tabs-fade-width);
    width: var(--tabs-fade-width);

    align-self: stretch;

    min-height: 3rem;

    pointer-events: none;

    z-index: 10;

    opacity: 0;

    transition:
      opacity 150ms ease;
  }


  /* linker Fade */
  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu]::before {
    left: 0;

    margin-right:
      calc(-1 * var(--tabs-fade-width));

    background:
      linear-gradient(
        to right,
        var(
          --component-library---color--surface--background,
          var(--color--surface--background, #fff)
        ),
        transparent
      );
  }


  /* rechter Fade */
  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu]::after {
    right: 0;

    margin-left:
      calc(-1 * var(--tabs-fade-width));

    background:
      linear-gradient(
        to right,
        transparent,
        var(
          --component-library---color--surface--background,
          var(--color--surface--background, #fff)
        )
      );
  }


  /* Fade States */
  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu].has-scroll-left::before {
    opacity: 1;
  }


  [data-tabs][data-tabs-horizontal="tablet-down"]
  [data-tabs-menu].has-scroll-right::after {
    opacity: 1;
  }

}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  [data-tabs-menu]
  > .w-tab-link:hover:not(.w--current) {
    color:
      var(--component-library---color--text--primary);

    background-color:
      var(--component-library---color--border--subtle);
  }

}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

[data-tabs-menu]
> .w-tab-link:focus-visible {
  outline:
    2px solid
    var(--component-library---color--border--focus);

  outline-offset: 2px;
}