@mixin data-table-background-mapping {

  .data-table__table th {
    .sort-by {
      color: returnColorCSSVar('brand-secondary-tint-60');

      @include bg-variants() {
        color: variant-property('navigationLinkIdle');
    }
  }
    .sort-by--up,
    .sort-by--down {
      color: returnColorCSSVar('brand-secondary-shade-180');

      @include bg-variants(){
        color: variant-property('navigationLinkHover');
      }
    }

      .sort-by:before {
        border-bottom-color: returnColorCSSVar('brand-secondary-tint-60');

        @include bg-variants(){
          border-bottom-color: variant-property('navigationLinkIdle');
        }
      }

      .sort-by:after {
        border-top-color: returnColorCSSVar('brand-secondary-tint-60');

        @include bg-variants(){
          border-top-color: variant-property('navigationLinkIdle');
        }
      }

      .sort-by--up::before {
        border-bottom-color: returnColorCSSVar('brand-secondary-shade-180');

        @include bg-variants(){
          border-bottom-color: variant-property('navigationLinkHover');
        }
      }

      .sort-by--down::after {
        border-top-color: returnColorCSSVar('brand-secondary-shade-180');

        @include bg-variants(){
          border-top-color: variant-property('navigationLinkHover');
        }
      }
  }

  //! remove after color mapping is implemented for data table

  .data-table__table th {
    // header title color
    .sort-by {
      color: $color--two-60;
    }

    .sort-by--up,
    .sort-by--down {
      color: $color--two-180;
    }

    // arrow colors
    .sort-by:before {
      border-bottom-color: $color--two-60;
    }

    .sort-by:after {
      border-top-color: $color--two-60;
    }

    .sort-by--up::before {
      border-bottom-color: $color--two-180;
    }

    .sort-by--down::after {
      border-top-color: $color--two-180;
    }
  }
}