// .style-[color] is a background, color and border color setter that can be practical for table items and other elements
@each $name, $colors in $PALETTE {
  // Original version
  .style-#{"" + $name} {
    // These are exceptions that should have special text color
    @if $name == yellow or $name == pink {
      color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "darker"}) !important;
      // Local text color
      --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "darker"}) !important;
    } @else if $name == light {
      color: var(--#{$CSS_VAR_PFX}txt-color) !important;
      // Local text color
      --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color) !important;
    } @else {
      color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;
      // Local text color
      --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;
    }

    background-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "primary"}) !important;
    // Local background color can be used as background of <mark.inline> [:before]
    --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "primary"}) !important;

    border-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "dark"}) !important;
    // Local border color can be used as color of box shadow e.g. buttons
    --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "dark"}) !important;
    --#{$CSS_VAR_PFX}local-border-color-dark: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "darker"}) !important;
  }

  // Light version
  .style-#{"" + $name}-light {
    // These are exceptions that should have special text color
    @if $name == dark {
      color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;
      // Local text color
      --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color-inverted) !important;
    } @else if $name == light {
      color: var(--#{$CSS_VAR_PFX}txt-color) !important;
      // Local text color
      --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}txt-color) !important;
    } @else {
      color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "darker"}) !important;
      // Local text color
      --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "darker"}) !important;
    }

    background-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "light"}) !important;
    // Local background color can be used as background of <mark.inline> [:before]
    --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "light"}) !important;

    border-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "primary"}) !important;
    // Local border color can be used as color of box shadow e.g. buttons
    --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "primary"}) !important;
    --#{$CSS_VAR_PFX}local-border-color-dark: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "dark"}) !important;
  }
}

[class*="style-"] {
  // change link text color for color setter classes
  --#{$CSS_VAR_PFX}link-color: var(--#{$CSS_VAR_PFX}local-txt-color);
  --#{$CSS_VAR_PFX}link-color__hover: var(--#{$CSS_VAR_PFX}local-txt-color);
  --#{$CSS_VAR_PFX}link-color__focus: var(--#{$CSS_VAR_PFX}local-txt-color);
}

[class*="style-"]:not([class*="style-accent"]) {
  // reset accent color when class is not accent color,
  // for example for style-red accent color should be red.
  --#{$CSS_VAR_PFX}color-accent-light: var(--#{$CSS_VAR_PFX}local-border-color);
  --#{$CSS_VAR_PFX}color-accent-primary: var(--#{$CSS_VAR_PFX}local-border-color-dark);
  --#{$CSS_VAR_PFX}color-accent-dark: var(--#{$CSS_VAR_PFX}local-border-color-dark);
}

// .color-[color] is a text color setter
@each $name, $colors in $PALETTE {
  // Original version
  .color-#{"" + $name} {
    color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "primary"}) !important;
  }

  // Light version
  .color-#{"" + $name}-light {
    color: var(--#{$CSS_VAR_PFX + "color-" + $name + "-" + "light"}) !important;
  }
}