@import '../../stylesheets/defaults'

+host-styles(mp-icon-input)
  display inline-block

+prefix-classes('mp-icon-input-')
  .container
    align-items center
    display inline-flex
    position relative
    width 100%

    input.input
      padding 6px 36px 7px
      width 100%

      &.rounded
        border-radius 30px

    .icon
      align-items center
      bottom 0
      display flex
      left 8px
      position absolute
      svg-icon-style($grey-500)
      top 0

    .clear-icon
      cursor pointer
      height 22px
      position absolute
      right 12px
      svg-icon-style($grey-500, $mp-blue, size: 22px)
      top 50%
      transform translateY(-50%)