@use "sass:string";

@use "../functions";

@mixin current-color-vars-important($current-color-var-name) {
  color: var(#{$current-color-var-name}) !important;
}

@mixin current-color-vars($current-color-var-name) {
  color: var(#{$current-color-var-name});
}

@mixin bg-variant-important($color-name) {
  .u-bg-#{$color-name} {
    background-color: var(--u-color-#{$color-name}) !important;
  }
}

@mixin text-bg-variant-important($color-name, $on-color-name: null) {

  @if $on-color-name == null {
    $on-color-name: on-#{$color-name};
  }

  $container-index: string.index($on-color-name, "surface-container");
  @if $container-index != null {
    $on-color-name: #{string.slice($on-color-name, 1, $container-index - 1)}surface;
  }

  .u-text-bg-#{$color-name} {
    @include current-color-vars-important(--u-color-#{$on-color-name});
    background-color: var(--u-color-#{$color-name}) !important;
  }
}