/// ----------------------------------------------------------------------

/// Icon

/// ----------------------------------------------------------------------

@use 'colours';
@use 'transitions';

/// -------------------
/// Icon config
/// -------------------

$sizes: (
  xs: 0.5rem,
  sm: 0.75rem,
  md: 1rem,
  lg: 1.5rem,
  xl: 2rem
) !default;

$colours: (
  dark: colours.$ui-five,
  inverse: colours.$ui-one,
  info: colours.$state-info,
  success: colours.$state-success,
  warning: colours.$state-warning,
  error: colours.$state-error
) !default;

/// -------------------
/// Icon selectors
/// -------------------

.icn {
  display: inline-block;

  @each $size-name, $size-prop in $sizes {
    &--#{$size-name} {
      width: $size-prop;
      min-width: $size-prop;
      height: $size-prop;
      min-height: $size-prop;
    }
  }

  @each $colour-name, $colour-prop in $colours {
    &--#{$colour-name} {
      fill: $colour-prop;
    }
  }

  & > svg {
    display: block;
    transition: fill transitions.$ease;
    fill: inherit;
  }
}
