@mixin show-more-background-mapping {

  .show-more {

    .section-separator {
      color: returnColorCSSVar('brand-secondary-tint-80');
    }

    .section-separator--border span {
      background: returnColorCSSVar('white');

      .bg-variant-brand-tertiary & {
        background: returncolorCSSVar('brand-teritary');
      }
    }

    .section-separator--border:before {
      background: returnColorCSSVar('gray-20');
    }

    @include bg-variants (
      $supportedBackgrounds: (
       'white',
       'brand-tertiary'
      )
    ) {
      .section-sparator {
        color: variant-property('divider')
      }

      .section-separator--border span {
        background: variant-property('background');
      }

      .section-separator--border:before {
        background: variant-property('divider');
      }

    }
  }

//! deprecation waring do not use after color map is live

  .bg-brand--off-white .section-separator {
    color: $color--two-80;
  }

  .section-separator--border span {
    .bg-brand--white & {
      background: $color-brand--white;
    }

    .bg-brand--off-white & {
      background: $color-brand--four;
    }
  }
}