.cs-bg {
  @each $code, $color in $ub-colorcodes {
    @include m(#{$code}) {
      background-color: $color;
    }
  }

  @each $code, $color in $ub-ld-colorcodes {
    @include m(#{$code}) {
      background-color: $color;
    }
  }
}

.cs-rgba-bg {
  @each $code, $color in $ub-colorcodes {
    @include m(#{$code}) {
      background-color: rgba($color, 0.8);
    }
  }
}

.cs-tint-bg {
  @each $code, $color in $ub-colorcodes {
    @include m(#{$code}) {
      $tint-color: scale-color($color, $lightness: 90%);
      background-color: $tint-color;

      &::before {
        border-bottom-color: $tint-color;
      }
    }
  }
}

.cs-txt {
  @each $code, $color in $ub-colorcodes {
    @include m(#{$code}) {
      color: $color;
    }
  }
}

.cs-txt-link {
  @each $code, $color in $ub-colorcodes {
    @include m(#{$code}) {
      &,
      &:hover,
      &:focus {
        color: $color;
      }
    }
  }
}

.cs-link-bg {
  @each $code, $color in $ub-colorcodes {
    @include m(#{$code}) {
      &,
      &:hover,
      &:focus {
        background: none;
        color: $ub-white;

        > div {
          background-color: $color;
        }
      }
    }
  }
}