// Utilities :: Colours

@each $fabric-key, $fabric-value in $fabric-colors {
  $gradient-dark: darken($fabric-value, 15%);

  [class~='u-fabric-#{$fabric-key}-bg'] {
    background-color: $fabric-value !important;
    color: fabric-choose-contrast-color($fabric-value) !important;

    svg {
      fill: fabric-choose-contrast-color($fabric-value) !important;
    }

    > * {
      $currentColor: fabric-choose-contrast-color($fabric-value);
      color: currentColor !important;
      border-color: currentColor !important;
    }

    // &[class~='o-swatch']:before {
    //   content: '#{$fabric-key}';
    //   text-transform: capitalize;
    // }

    &[class~='o-swatch']:after {
      content: '#{$fabric-value}';
    }

    @each $fabric-key, $fabric-value2 in $fabric-opacities {
      &.u-fabric-opacity--l#{$fabric-key} {
        color: fabric-choose-contrast-color($fabric-value) !important;
        background-color: rgba($fabric-value, $fabric-value2);
      }
    }
  }

  @for $i from 1 through $fabric-tones {
    $variant: $i * 5%;
    $fabric-tint: lighten($fabric-value, $variant);
    $fabric-shade: darken($fabric-value, $variant);
    [class~='u-fabric-#{$fabric-key}-bg--tint-#{$i}0'] {
      background-color: $fabric-tint !important;
      color: fabric-choose-contrast-color($fabric-value);
    }

    [class*='o-swatch'][class~='u-fabric-#{$fabric-key}-bg--tint-#{$i}0']:after {
      content: '#{$fabric-tint}';
    }

    [class~='u-fabric-#{$fabric-key}-bg--shade-#{$i}0'] {
      background-color: $fabric-shade !important;
      color: fabric-choose-contrast-color($fabric-value);
    }

    [class*='o-swatch'][class~='u-fabric-#{$fabric-key}-bg--shade-#{$i}0']:after {
      content: '#{$fabric-shade}';
    }
  }

  [class~='u-fabric-#{$fabric-key}-gradient'] {
    @include fabric-linear-gradient(to right, $fabric-value, $gradient-dark);
    color: fabric-choose-contrast-color($fabric-value);

    &[class~='o-swatch']:after {
      content: '#{$fabric-value} to #{$gradient-dark}';
      top: auto;
    }
  }

  [class~='u-fabric-#{$fabric-key}-colour'] {
    color: $fabric-value !important;
    fill: $fabric-value !important;
  }
}

// Can also call colours like below:
//
// .element {
//   color: fabric-color(primary);
// }

.u-fabric--lighten {
  background-color: fabric-color('white');
  color: fabric-choose-contrast-color(white);
  svg {
    fill: fabric-choose-contrast-color(white);
  }
}