svg-icon-style(base-color=null, hover-color=null, speed=0, size=22px, pos-left=0, pos-top=0)
  svg-icon
    display inline-block
    height size
    min-height size
    min-width size
    position relative
    width size

    &[icon=type-boolean]
      #left-dot
        color $white
        fill $white
      #right-dot
        color $grey-900
        fill $grey-900

    &[icon=lightning-bolt], &[icon=lighting-bolt]
      #bolt
        color $white
        fill $white

    &[icon=alert]
      #circle, #stem
        color $white
        fill $white

    &[icon=opt-out]
      #left-arrow
        color $mp-blue
        fill $mp-blue
      #right-arrow
        color darken($blue-900, 15)
        fill darken($blue-900, 15)

    svg
      height size
      left pos-left
      min-height size
      min-width size
      position absolute
      top pos-top
      width size

    if base-color != null
      svg, path
        color base-color
        fill base-color

  if hover-color != null
    svg-icon
      svg, path
        transition speed

    &:hover
      svg-icon
        svg, path
          color hover-color
          fill hover-color

// this mixin is now deprecated. please use the mp-icon-input component
icon-input(icon-color=$grey-500, icon-color-focus=$grey-700)
  align-items center
  display inline-flex
  position relative

  input
    padding 6px
    padding-left 36px
    padding-right 18px
    width 100%

    if icon-color-focus
      &:focus + .mp-icon
        svg-icon-style(icon-color-focus)

  .mp-icon
    align-items center
    bottom 0
    display flex
    left 8px
    position absolute
    top 0

    svg-icon-style(icon-color)