@use '../functions/color' as *;
@use '../functions/get-var' as *;
@use '../variables' as *;

// Label base style
@mixin label-base() {
  // border-radius: $border-radius; // old spectre.css
  border-radius: get-var('border-radius');
  line-height: 1.25;
  padding: 0.1rem 0.2rem;
}

// @mixin label-variant($color: $light-color, $bg-color: $primary-color) { // old spectre.css
@mixin label-variant($color: 'light-color', $bg-color: 'primary-color') {
  // background: $bg-color; // old spectre.css
  background: color($bg-color);
  // color: $color; // old spectre.css
  color: color($color);
}

@mixin label--variant(
  $color: color('light-color'),
  $bg-color: color('primary-color')
) {
  color: $color;
  background: $bg-color;
}

/*
  The mixin includes an extending class of name prefixed with `label-` with the given color `$name` that includes a label variant of the given `$color` and `$bg-color`.
*/
@mixin label-class-variant(
  $name: 'light',
  $color: 'light-color',
  $bg-color: 'primary-color',
) {
  &.label-#{$name} {
    @include label-variant($color, $bg-color);
  }
}