.tab-bar {
  display: flex;
  justify-content: flex-start;
  overflow: scroll;
  scroll-behavior: smooth;
  width: 100%;
  scrollbar-width: none; // firefox hide scrollbar
  -ms-overflow-style: -ms-autohiding-scrollbar; // edge hide scrollbar
  &::-webkit-scrollbar {
    display: none; // chrome, opera, safari hide scrollbar
  }

  &__item:not(:first-child) {
    margin: 0 15px;
  }

  &__item:first-child {
    margin-right: 15px;
  }

  &__item {
    align-items: center;
    border-bottom: 3px solid transparent;
    color: $color-alpha--two-70;
    cursor: pointer;
    display: flex;
    height: 80px;
    padding: $spacing--xs 0;
    text-decoration: none;
    transition: $transition-duration;
    white-space: nowrap;
  }

  &__item:hover,
  &__item.active {
    color: $color-brand--two;
    transition: $transition-duration;
    text-decoration: none;
  }

  &__item.active {
    border-bottom: 3px solid $color-brand--two;
  }

  &__line {
    margin-top: $baseline * -0.1;
  }

  .hide {
    display: none;
  }

  .fade-element {
    height: $baseline * 8;
    position: absolute;
    width: 50px;
    z-index: 1;

    &--right {
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 30%
      );
    }

    &--left {
      background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 30%
      );
      left: 0;
    }

    .icon {
      height: $baseline * 7.5;
      top: 1px;

      svg {
        @include color-dark-shade-main;
        transition: $transition-duration;
      }

      &:hover {
        cursor: pointer;

        svg {
          fill: $color--two-180;
          transition: $transition-duration;
        }
      }

      &__left {
        left: 20px;

        svg {
          padding-right: 3px;
          padding-top: $baseline * 0.1;
        }
      }

      &__right {
        right: 20px;

        svg {
          padding-left: 3px;
          padding-top: $baseline * 0.1;
        }
      }
    }
  }

  &--icon {
    .tab-bar__item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 10px;
      @include font-style('body--xs');

      @include viewport--m {
        font-size: inherit;
        margin: 0 15px;
      }

      &:first-child {
        margin-left: 0;
      }

      @include viewport--m {
        flex-direction: row;
      }

      .icon {
        align-self: center;
        color: inherit;
        margin-bottom: 6px;
        position: relative;

        @include viewport--m {
          margin-right: $baseline;
          margin-bottom: 0;
        }
      }
    }
  }

  @include tab-bar-background-mapping;
}