/// Set a svg on a button.
///
/// Given a svg color, this mixin will use the passed color to set the
/// `svg` CSS rule.
///
/// @group buttons
///
/// @parameter {Map} $colors - map of colors
/// @parameter {String} $parent - parent's class
/// @parameter {String} $stroke_class - parent's stroke class
///
/// @example scss - Usage
///    $colors: (
///      base: (
///        color: #fff,
///        border-color: #00669e,
///        background-color: #00669e,
///      ),
///      hover: (
///        color: #000,
///        border-color: #00669e,
///        background-color: #00669e,
///      ),
///      …
///    );
///
///   .k-Button__svg {
///     @include k-buttonSvg($colors, 'k-Button', 'k-Button__stroke');
///   }
///
/// @example css - CSS output
///    .k-Button .k-Button__svg {
///      fill: #fff;
///    }
///
///    .k-Button:hover .k-Button__svg {
///      fill: #000;
///    }
///    …

@mixin k-buttonSvg($colors) {
  $base-color: k-color-definition(
    k-map-fetch($colors, ('base', 'color')));
  $hover-color: k-color-definition(
    k-map-fetch($colors, ('hover', 'color')));
  $focus-color: k-color-definition(
    k-map-fetch($colors, ('focus', 'color')));
  $active-color: k-color-definition(
    k-map-fetch($colors, ('active', 'color')));
  $disabled-color: k-color-definition(
    k-map-fetch($colors, ('disabled', 'color')));
  $is-selected-color: k-color-definition(
    k-map-fetch($colors, ('is-selected', 'color')));

  .k-Button__icon,
  .k-ButtonIcon__svg {
    fill: $base-color;
    .k-Button__svg__stroke {
      stroke: $base-color;
    }
  }

  &:hover:not(.is-readonly, :disabled) .k-Button__icon,
  &:hover:not(.is-readonly, :disabled) .k-ButtonIcon__svg, {
    fill: $hover-color;
    .k-Button__svg__stroke {
      stroke: $hover-color;
    }
  }

  &:focus:not(.is-readonly, :disabled) .k-Button__icon,
  &:focus:not(.is-readonly, :disabled) .k-ButtonIcon__svg {
    fill: $focus-color;
    .k-Button__svg__stroke {
      stroke: $focus-color;
    }
  }

  &:active:not(.is-readonly, :disabled) .k-Button__icon,
  &:active:not(.is-readonly, :disabled) .k-ButtonIcon__svg {
    fill: $active-color;
    .k-Button__svg__stroke {
      stroke: $active-color;
    }
  }

  &:disabled .k-Button__icon,
  &:disabled .k-ButtonIcon__svg {
    fill: $disabled-color;
    .k-Button__svg__stroke {
      stroke: $disabled-color;
    }
  }

  &.is-selected:not(.is-readonly, :disabled) .k-Button__icon,
  &.is-selected:not(.is-readonly, :disabled) .k-ButtonIcon__svg {
    fill: $is-selected-color;
    .k-Button__svg__stroke {
      stroke: $is-selected-color;
    }
  }
}