@mixin btn-fill-colors() {
  @each $color, $i in $colors {
    &.fill-#{$color} path,
    &.fill-#{$color} circle,
    &.fill-#{$color} polygon,
    &.fill-#{$color} rect { // stylelint-disable-line
      fill: $i;
    }
  }
}

@mixin btn-stroke-colors() {
  @each $color, $i in $colors {
    &.stroke-#{$color} path,
    &.stroke-#{$color} circle,
    &.stroke-#{$color} polygon,
    &.stroke-#{$color} line,
    &.stroke-#{$color} polyline { // stylelint-disable-line
      stroke: $i;
    }
  }
}


@mixin btn-box-shadow-colors() {
  @each $color, $i in $colors {
    &.box-shadow-#{$color} {
      transition-property: box-shadow;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;

      box-shadow: inset 0 0 0 2px $i;
    }
  }
}

@mixin box-shadow-colors($spread: 4px) {
  @each $color, $i in $colors {
    &.box-shadow-#{$color} {
      transition-property: box-shadow;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;

      box-shadow: inset 0 0 0 $spread $i;
    }
  }
}

@mixin box-shadow-selected() {
  @each $color, $i in $colors {
    &.box-shadow-#{$color} {
      transition-property: box-shadow;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;

      box-shadow: inset 4px 0 0 0 $i;

    }
  }
}