@use 'sass:color';
@use 'sass:list';
@use 'bulma-variables' as bv;

/**
 * This creates fill classes for use on SVG icons, from Bulma's SCSS colors
 * variable.
 * 
 * .has-fill-danger: Bulma's danger color.
 * .has-fill-danger-hoverable: Bulma's danger color, which darkens on hover.
 */
@each $name, $pair in bv.$colors {
  $color: list.nth($pair, 1);

  .has-fill-#{$name} {
    fill: $color !important;
  }

  .has-fill-#{$name}-hoverable {
    fill: $color !important;

    &:hover,
    &:focus {
      fill: color.adjust($color, $lightness: -15%) !important;
    }
  }
}

$extra-colors: (
  "dark-grey": bv.$grey-dark,
  "grey": bv.$grey,
  "light-grey": bv.$grey-light,
);

@each $name, $pair in $extra-colors {
  $color: list.nth($pair, 1);

  .has-fill-#{$name} {
    fill: $color !important;
  }

  .has-fill-#{$name}-hoverable {
    fill: $color !important;

    &:hover,
    &:focus {
      fill: color.adjust($color, $lightness: -15%) !important;
    }
  }
}

.has-fill-text-color {
  fill: var(--bulma-text);
}
