@use 'variables' as *;

#{$css-scope} {
  // Color palette (immutable).
  // ------------------------------------------------------
  $colors: (
    'pink': #e91e63,
    'purple': #a741b9,
    'deep-purple': #673ab7,
    'indigo': #3f51b5,
    'blue': #2196f3,
    'light-blue': #03a9f4,
    'cyan': #04cbe5,
    'teal': #1db3a8,
    'green': #4caf50,
    'light-green': #90d73f,
    'lime': #cee029,
    'yellow': #ffe70f,
    'amber': #ffc107,
    'orange': #ff9800,
    'deep-orange': #ff6825,
    'red': #fa3317,
    'brown': #845848,
    'blue-grey': #6c8693,
    'grey': #848484
  );

  // For each color, create a [color] and a [color]--bg associated classes,
  // + 6 shades lighter and 6 shades darker.
  @each $label, $color in $colors {
    .#{$label}--bg {background-color: var(--w-#{$label}-color);}
    .#{$label} {color: var(--w-#{$label}-color);}

    @for $i from 1 through 6 {
      .#{$label}-light#{$i}--bg {background-color: var(--w-#{$label}-light#{$i}-color);}
      .#{$label}-light#{$i} {color: var(--w-#{$label}-light#{$i}-color);}
      .#{$label}-dark#{$i}--bg {background-color: var(--w-#{$label}-dark#{$i}-color);}
      .#{$label}-dark#{$i} {color: var(--w-#{$label}-dark#{$i}-color);}
    }
  }

  .primary--bg {color: var(--w-base-bg-color);}
  .white--bg {background-color: #fff;}
  .white {color: #fff;}
  .black--bg {background-color: #000;}
  .black {color: #000;}
  .transparent--bg {background-color: transparent;}
  .transparent {color: transparent;}
  .inherit--bg {background-color: inherit;}
  .inherit {color: inherit;}
  // ------------------------------------------------------

  // Theming colors.
  // These classes carry colors which change automatically when switching theme.
  // ------------------------------------------------------
  .base-color {color: color-mix(in srgb, var(--w-base-color) 75%, transparent);}
  .base-color--bg {background-color: var(--w-base-bg-color);}
  .contrast-color {color: color-mix(in srgb, var(--w-contrast-color) 75%, transparent);}
  .contrast-color--bg {background-color: var(--w-contrast-bg-color);}

  .contrast-o025 {color: var(--w-contrast-bg-o025-color);}
  .contrast-o025--bg {background-color: var(--w-contrast-bg-o025-color);}
  .contrast-o05 {color: var(--w-contrast-bg-o05-color);}
  .contrast-o05--bg {background-color: var(--w-contrast-bg-o05-color);}
  @for $i from 1 through 9 {
    .contrast-o#{$i} {color: var(--w-contrast-bg-o#{$i}-color);}
    .contrast-o#{$i}--bg {background-color: var(--w-contrast-bg-o#{$i}-color);}
  }
  // ------------------------------------------------------

  // Status colors - must stay last and have highest priority.
  // ------------------------------------------------------
  .info {color: var(--w-info-color);}
  .info--bg {background-color: var(--w-info-color);color: #fff;}
  .warning {color: var(--w-warning-color);}
  .warning--bg {background-color: var(--w-warning-color);color: #fff;}
  .success {color: var(--w-success-color);}
  .success--bg {background-color: var(--w-success-color);color: #fff;}
  .error {color: var(--w-error-color);}
  .error--bg {background-color: var(--w-error-color);color: #fff;}
  // ------------------------------------------------------

  // The only colors remaining to define are user custom colors and shades.
  // The associated CSS will be generated from dynamic-css.js, and injected as a first stylesheet,
  // before this one (so the rules in this file have more priority).
}