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

+host-styles('mp-input-group')
  display inline-flex
  height 40px
  width 300px

+prefix-classes('mp-input-group-')
  .container, .container *
    box-sizing border-box

  .container
    align-items center
    display inline-flex
    height 100%
    width 100%

    .input, .btn
      display inline-flex

    .input
      border-bottom-left-radius 5px
      border-bottom-right-radius 0
      border-top-left-radius 5px
      border-top-right-radius 0
      height 100%
      margin 0 -2px 0 0
      margin-right -2px
      padding-left 10px
      width 80%

    .btn
      border-bottom-left-radius 0
      border-top-left-radius 0
      height 100%
      max-width 180px
      min-width 90px
      width 20%

    .spinner
      width 12px