@use 'sass:color';
@use '../utils/color-helper' as helper;
@use '../variables' as vars;

// BsBadge variants -- scss mixins
//---------------------------------
@mixin make-actionable-variant-light($name, $color) {
  a.#{vars.$prefix}badge {
    &.text-bg-#{$name} {
      &:focus,
      &:hover {
        background-color: helper.to-oklch(color.adjust($color, $lightness: -10%)) !important;
      }

      &:focus {
        $shadow-color: helper.set-color-contrast(
          $color,
          helper.set-color-contrast($color, $color, color.adjust($color, $lightness: 5%), 90%),
          color.adjust($color, $lightness: 8%)
        );
        box-shadow: #{0 0 0 0.25rem helper.to-oklch(color.change($shadow-color, $alpha: 0.65))};
      }
    }
  }
}

// Make actionable badge with dark theme
//--------------------------------------
@mixin make-actionable-variant-dark($name, $color) {
  a.#{vars.$prefix}badge {
    &.text-bg-#{$name} {
      &:focus,
      &:hover {
        background-color: helper.to-oklch(color.adjust($color, $lightness: -10%)) !important;
      }

      &:focus {
        $shadow-color: helper.set-color-contrast(
          $color,
          color.change(color.adjust($color, $lightness: 4%), $alpha: 0.5),
          color.change(color.adjust($color, $lightness: 15%), $alpha: 0.35),
          80%
        );
        box-shadow: #{0 0 0 0.25rem helper.to-oklch($shadow-color)};
      }
    }
  }
}