.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
  }

  .bg-brand--off-white & {
    .fade-element--right {
      background: linear-gradient(to right, rgba(247, 245, 240, 0) 0%, rgba(247, 245, 240, 1) 30%);
    }

    .fade-element--left {
      background: linear-gradient(to left, rgba(247, 245, 240, 0) 0%, rgba(247, 245, 240, 1) 30%);
      left: 0;
    }
  }

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

    &--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 {
        fill: $color--two-50;
        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;
        }
      }
    }
  }

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

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

  &__item {
    border-bottom: 3px solid transparent;
    color: $color--two-50;
    cursor: pointer;
    line-height: 57px;
    padding: $spacing--xs 0;
    transition: $transition-duration;
    white-space: nowrap;

    a {
      color: inherit;
      text-decoration: none;
    }
  }

  &__item:hover,
  &__item.active {
    color: $color--two-180;
    transition: $transition-duration;
  }

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

  &__line {
    border-top: 1px solid $color--grey;
    margin-top: $baseline * -0.1;
  }

  .hide {
    display: none;
  }
}
