<div class="tabs-container">
  <ul class="nav nav-tabs scrollbar scrollbar--to-active" role="tablist">
    <li class="nav-item" role="presentation">
      <button
        class="nav-link label label--headline active"
        id="home-tab"
        data-bs-toggle="tab"
        data-bs-target="#home"
        type="button"
        role="tab"
        aria-controls="home"
        aria-selected="true"
      >
        Home
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link label label--headline"
        id="profile-tab"
        data-bs-toggle="tab"
        data-bs-target="#profile"
        type="button"
        role="tab"
        aria-controls="profile"
        aria-selected="false"
      >
        Profile
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link label label--headline"
        id="contact-tab"
        data-bs-toggle="tab"
        data-bs-target="#contact"
        type="button"
        role="tab"
        aria-controls="contact"
        aria-selected="false"
      >
        Contact
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link label label--headline"
        id="settings-tab"
        data-bs-toggle="tab"
        data-bs-target="#settings"
        type="button"
        role="tab"
        aria-controls="settings"
        aria-selected="false"
      >
        Settings
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link label label--headline"
        id="notifications-tab"
        data-bs-toggle="tab"
        data-bs-target="#notifications"
        type="button"
        role="tab"
        aria-controls="notifications"
        aria-selected="false"
      >
        Notifications
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link label label--headline"
        id="logout-tab"
        data-bs-toggle="tab"
        data-bs-target="#logout"
        type="button"
        role="tab"
        aria-controls="logout"
        aria-selected="false"
      >
        Logout
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link label label--headline"
        id="more-tab"
        data-bs-toggle="tab"
        data-bs-target="#more"
        type="button"
        role="tab"
        aria-controls="more"
        aria-selected="false"
      >
        More
      </button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
    <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
    <div class="tab-pane fade" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
    <div class="tab-pane fade" id="logout" role="tabpanel" aria-labelledby="logout-tab">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
    <div class="tab-pane fade" id="more" role="tabpanel" aria-labelledby="more-tab">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
  </div>
  <div class="tabs__navigation"></div>
</div>

<script type="module" src="{{ page.script }}"></script>

      

      @import 'bootstrap/scss/transitions.scss';
@import 'bootstrap/scss/nav.scss';

.tab {
  &-pane {
    padding: 24px;
  }

  &-content {
    border: 1px solid $gray-dark;
    border-radius: 0 $border-radius $border-radius $border-radius;
    font-size: $font-size-lg;
    color: $primary;

    & .tab-pane {
      & > *:first-child {
        margin-top: 0;
      }

      & > *:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.tabs-container {
  --nav-height: 45px;
  position: relative;

  &--slider {
    margin-bottom: 2px;

    .nav-link.active {
      position: relative;

      &:before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(0deg, rgba($black, 1), rgba($black, .0001));
        opacity: 0.05;
        pointer-events: none;
      }
    }
  }

  &--scrollable {
    .tabs {
      &__navigation {
        content: '>';
        position: absolute;
        display: block;
        cursor: pointer;
        z-index: 10;
        top: 0;
        right: 20px;
        width: 40px;
        height: var(--nav-height);
        background-repeat: no-repeat;
        background-position: center right;
        background-image: url("data:image/svg+xml,%3csvg width='18px' height='15px' viewBox='0 0 18 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Design' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Unternehmen-/-Forschung-und-Entwicklung' transform='translate(-1401.000000%2c -1366.000000)' fill='%230E2249' fill-rule='nonzero' stroke='%230E2249' stroke-width='0.5'%3e%3cg id='Slider-with-Tabs' transform='translate(160.000000%2c 1352.000000)'%3e%3cg id='Tabs-inactive' transform='translate(314.000000%2c 1.000000)'%3e%3cg id='Icon-Arrow-Right' transform='translate(928.000000%2c 14.000000)'%3e%3cpath d='M15.9060397%2c6.83183917 L15.8446778%2c6.9052839 L9.9052839%2c12.8446778 C9.69818768%2c13.0517741 9.36241838%2c13.0517741 9.15532216%2c12.8446778 C8.97123664%2c12.6605923 8.95078269%2c12.3748392 9.09396032%2c12.1681608 L9.15532216%2c12.0947161 L14.249%2c7 L0.533175355%2c7 C0.238710738%2c7 0%2c6.77614237 0%2c6.5 C0%2c6.25454011 0.188610953%2c6.05039163 0.437336411%2c6.00805567 L0.533175355%2c6 L14.25%2c6 L9.15532216%2c0.905283899 C8.94822595%2c0.698187684 8.94822595%2c0.362418377 9.15532216%2c0.155322161 C9.33940769%2c-0.0287633632 9.62516084%2c-0.0492173104 9.83183917%2c0.0939603199 L9.9052839%2c0.155322161 L15.8446778%2c6.0947161 C15.9367206%2c6.18675886 15.9878555%2c6.30421853 15.9980824%2c6.4245023 L15.9980824%2c6.5754977 C15.9904122%2c6.66571052 15.9597313%2c6.7543348 15.9060397%2c6.83183917 Z' id='Combined-Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"),
          linear-gradient(to right, rgba(255, 255, 255, 0.0001) 0, rgba(255, 255, 255, 1) 80%);
      }
    }
  }
}

.tabs {
  &__navigation {
    display: none;
  }
}

.nav-tabs {
  border-bottom: none;
  flex-wrap: nowrap;
  overflow: auto;
  margin-right: 20px;
  margin-bottom: -1px;

  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  .tabs-container--scrollable & {
    .nav-item {
      &:last-child {
        padding-right: 30px;
      }
    }
  }

  .nav-link {
    padding: 16px 24px;
    border-left: 1px solid $gray-dark;
    border-top: 1px solid $gray-dark;
    border-right: 1px solid $gray-dark;
    border-bottom: none;
    border-radius: $border-radius $border-radius 0 0;
    border-color: transparent;
    white-space: nowrap;
    margin-bottom: -1px;
    cursor: pointer;

    &:hover {
      border-color: $gray-light;
    }

    &.active {
      border-color: $gray-dark;
      color: $green;
    }
  }

  @each $name, $color in $colors {
    .nav-item--#{$name} .nav-link {
      &:focus:not(:hover) {
        border-color: transparent;
      }
      &.active {
        border-color: $color;
        background: $color;
        color: color-contrast($color);
      }
    }
  }
}