@mixin tab-bar-background-mapping {
  // ! remove old color names
  .fade-element--right {
    .bg-brand--off-white &,
    .bg-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%
      );
    }
  }

  .fade-element--left {
    .bg-brand--off-white &,
    .bg-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%
      );
    }
  }
}
