/**
 * EdGEL: Styling of SVG icons.
 */

@use "../settings" as *;
@use "../tools" as *;

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: $line-height-base;
  vertical-align: middle;
}
.icon-path {
  fill: var(--icon-fill, currentColor);
}

/**
 * Handle colouring of SVGs in a button.
 */
@each $colour, $value in $theme-colors {
  $hover-colour: shade-color($value, 2);
  .btn-#{$colour} {
    fill: color-contrast($value);

    &:hover,
    &:focus,
    &:active {
      fill: color-contrast($hover-colour);
    }
  }

  .icon-#{$colour} {
    fill: $value;
  }

  .btn-outline-#{$colour} {
    fill: $value;

    &:hover,
    &:focus,
    &:active {
      fill: color-contrast($value);
    }
  }
}

.btn-link {
  fill: $link-color;

  &:hover,
  &:focus,
  &:active {
    fill: $link-hover-color;
  }
}
