@import "../helpers";

// Copied from DG Core's _icons.scss file.
@mixin icon-variant($parent, $color) {
  #{$parent} {
    svg {
      fill: $color !important;
    }
  }
}

$icon-size-sm: 1rem;
$icon-size-md: 1.5rem;
$icon-size-lg: 2rem;
$icon-size-xl: 2.5rem;

// Button Variables
$icon-display: () !default;
$icon-display: map-merge(
  (
    "inline": inline,
    "block": block,
    "inline-block": inline-block,
  ),
  $icon-display
);

.som-icon {
  display: inline-block;

  svg {
    display: block;
    fill: currentColor;
    height: 1em;
    width: 1em;
  }

  &.som-icon-size-sm {
    svg {
      font-size: $icon-size-sm;
    }
  }

  &.som-icon-size-md {
    svg {
      font-size: $icon-size-md;
    }
  }

  &.som-icon-size-lg {
    svg {
      font-size: $icon-size-lg;
    }
  }

  &.som-icon-size-xl {
    svg {
      font-size: $icon-size-xl;
    }
  }

  @each $display, $value in $icon-display {
    &.som-icon-display-#{$display} {
      display: $value;
    }
  }
}

@each $color, $value in $theme-colors {
  @include icon-variant(".som-icon-color-#{$color}", $value);
}