.nd-tabs__header {
  position: relative;
  width: 100%;
  background: $nd-color-subtle;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20px;
    background: linear-gradient(
      to right,
      rgba($white, 0) 0%,
      rgba($white, 1) 50%,
      rgba($white, 1) 100%
    );
    z-index: 2;
  }
}

.nd-tabs__container {
  display: flex;
  overflow-x: scroll;
  padding: $default-spacing;
  &::-webkit-scrollbar {
    height: 0 !important;
  }
}

.nd-tab {
  @include rem(10);
  position: relative;
  padding-bottom: 2px;
  margin-right: $default-spacing;
  text-transform: uppercase;
  cursor: pointer;
  transition: $default-transition;

  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--nd-color-link);
    bottom: -3px;
    left: 50%;
    transition: $default-transition;
    transform: translateX(-50%);
  }

  &.active,
  &:hover {
    font-weight: 700;
    color: var(--nd-color-link);

    &:after {
      bottom: -5px;
      width: 100%;
      opacity: 1;
    }
  }
}

.nd-tabs__content {
  display: flex;
  padding-top: $default-spacing;
}

.nd-tab__content {
  display: flex;
}