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

// Button variant mixin
// @mixin button-variant($color: $primary-color) { // old spectre.css
@mixin button-variant($color: 'primary-color') {
  // background: $color; // old spectre.css
  background: color($color);
  // border-color: darken($color, 3%); // old spectre.css
  border-color: color($color, $lightness: -3%);
  // color: $light-color; // old spectre.css
  color: color('light-color');
  &:visited {
    // color: $light-color; // old spectre.css
    color: color('light-color');
  }
  &:focus {
    @include control-shadow($color);
  }
  &:focus,
  &:hover {
    // background: darken($color, 2%); // old spectre.css
    background: color($color, $lightness: -2%);
    // border-color: darken($color, 5%); // old spectre.css
    border-color: color($color, $lightness: -5%);
    // color: $light-color; // old spectre.css
    color: color('light-color');
  }
  &:active,
  &.active {
    // background: darken($color, 7%); // old spectre.css
    background: color($color, $lightness: -7%);
    // border-color: darken($color, 10%); // old spectre.css
    border-color: color($color, $lightness: -10%);
    // color: $light-color; // old spectre.css
    color: color('light-color');
  }
  &.loading {
    &::after {
      // border-bottom-color: $light-color; // old spectre.css
      border-bottom-color: color('light-color');
      // border-left-color: $light-color; // old spectre.css
      border-left-color: color('light-color');
    }
  }
}

// @mixin button-outline-variant($color: $primary-color) { // old spectre.css
@mixin button-outline-variant($color: 'primary-color') {
  // background: $light-color; // old spectre.css
  background: color('light-color');
  // border-color: $color; // old spectre.css
  border-color: color($color);
  // color: $color; // old spectre.css
  color: color($color);
  &:focus {
    @include control-shadow($color);
  }
  &:focus,
  &:hover {
    // background: lighten($color, 50%); // old spectre.css
    background: color($color, $lightness: -50%);
    // border-color: darken($color, 2%); // old spectre.css
    border-color: color($color, $lightness: -2%);
    // color: $color; // old spectre.css
    color: color($color);
  }
  &:active,
  &.active {
    // background: $color; // old spectre.css
    background: color($color);
    // border-color: darken($color, 5%); // old spectre.css
    border-color: color($color, $lightness: -5%);
    // color: $light-color; // old spectre.css
    color: color('light-color');
  }
  &.loading {
    &::after {
      // border-bottom-color: $color; // old spectre.css
      border-bottom-color: color($color);
      // border-left-color: $color; // old spectre.css
      border-left-color: color($color);
    }
  }
}