@mixin tab-bar-background-mapping {
  .fade-element--right {
    .bg-brand-tertiary &,
    .bg-variant-brand-tertiary & {
      background: linear-gradient(
        to right,
        rgba(247, 245, 240, 0) 0%,
        rgba(247, 245, 240, 1) 30%
      );
    }

    .bg-greyscale--grey-10 &,
    .bg-gray-10 & {
      background: linear-gradient(
        to right,
        rgba(247, 247, 247, 0) 0%,
        rgba(247, 247, 247, 1) 30%
      );
    }
  }

  .tab-bar__item {
    .bg-variant-brand-tertiary & {
      color: returnColorCSSVar('brand-secondary-alpha-70');

      &.active {
        color: returnColorCSSVar('brand-secondary');
      }

      &:hover {
        color: returnColorCSSVar('brand-secondary');
      }
    }
  }

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

    .bg-greyscale--grey-10 &,
    .bg-gray-10 & {
      background: linear-gradient(
        to left,
        rgba(247, 247, 247, 0) 0%,
        rgba(247, 247, 247, 1) 30%
      );
    }
  }
}