///SVG related helpers

///List of current dimensions for SVG. If another dimension is needed for an SVG could be added here
$svg-dimensions: 16 18 20 22 24 25 30;

///For each dimension listed in svg-dimensions it will generate a rule like
///.svg-25x25 svg{ width: 25px, height: 25px }
@each $dimension in $svg-dimensions {
  .svg-#{$dimension}x#{$dimension} svg {
    width: #{$dimension}px;
    height: #{$dimension}px;
  }
}

///List of current color options for SVG. If another color is needed for an SVG could be added here
$svg-colors: (
  blue: $blue,
  gray: $gray,
  gray-light: $gray-light,
  gray-medium: $gray-medium
);

///For each dimension listed in svg-dimensions it will generate a rule like
///.svg-fill-blue svg{ fill: blue }
@each $name, $value in $svg-colors {
  .svg-fill-#{$name} {
    fill: $value;
  }
}