@use "../variables";
@use "shadow";

@use "sass:color";

// Button variant mixin
@mixin button-variant($color: variables.$primary-color) {
  background: $color;
  border-color: color.adjust($color, $lightness: -3%, $space: hsl);
  color: variables.$light-color;
  &:focus {
    @include shadow.control-shadow($color);
  }
  &:focus,
  &:hover {
    background: color.adjust($color, $lightness: -2%, $space: hsl);
    border-color: color.adjust($color, $lightness: -5%, $space: hsl);
    color: variables.$light-color;
  }
  &:active,
  &.active {
    background: color.adjust($color, $lightness: -7%, $space: hsl);
    border-color: color.adjust($color, $lightness: -10%, $space: hsl);
    color: variables.$light-color;
  }
  &.loading {
    &::after {
      border-bottom-color: variables.$light-color;
      border-left-color: variables.$light-color;
    }
  }
}

@mixin button-outline-variant($color: variables.$primary-color) {
  background: variables.$light-color;
  border-color: $color;
  color: $color;
  &:focus {
    @include shadow.control-shadow($color);
  }
  &:focus,
  &:hover {
    background: color.adjust($color, $lightness: 50%, $space: hsl);
    border-color: color.adjust($color, $lightness: -2%, $space: hsl);
    color: $color;
  }
  &:active,
  &.active {
    background: $color;
    border-color: color.adjust($color, $lightness: -5%, $space: hsl);
    color: variables.$light-color;
  }
  &.loading {
    &::after {
      border-bottom-color: $color;
      border-left-color: $color;
    }
  }
}
