@use '../functions/color' as *;
@use '../variables' as *;

// Background color utility mixin
@mixin bg-color-variant(
  $name: '.bg-primary',
  $color: 'primary-color',
  $hex-color: $primary-color
) {
  #{$name} {
    // background: $color !important; // old spectre.
    background: color($color) !important;

    // old spectre.
    // @if (lightness($color) < 60) {
    // color: $light-color;
    // }
    @if (lightness($hex-color) < 60) {
      color: color('light-color');
    }
  }
}

// Text color utility mixin
@mixin text-color-variant($name: '.text-primary', $color: 'primary-color') {
  #{$name} {
    // color: $color !important; // old spectre.
    color: color($color) !important;
  }

  a#{$name} {
    &:focus,
    &:hover {
      // color: darken($color, 5%); // old spectre.
      color: color($color, $lightness: -5%);
    }
    &:visited {
      // color: lighten($color, 5%);
      color: color($color, $lightness: +5%);
    }
  }
}