@import '../../stylesheets/mixins/common.styl'

$transition-speed = ($mp-fast)ms

+host-styles('mp-select')
  border 1px solid $grey-200
  border-radius 5px
  transition color $transition-speed, border-color $transition-speed

+host-styles('mp-select', ':hover')
  border-color $mp-blue
  color $mp-blue

+prefix-classes('select-')
  .container
    position relative
    text-align left
    text-transform none

    *
      box-sizing border-box

    .choose-option
      background none
      color $grey-700
      cursor pointer
      font-size-small()
      font-weight $weight-bold
      line-height normal
      padding 5px 8px 7px
      position relative
      svg-icon-style($grey-700, $mp-blue, $transition-speed / 2, pos-top: 1px)
      transition color $transition-speed
      width 100%

      .button-flex-wrapper
        align-items center
        display flex

      &:hover
        border-color $mp-blue
        color $mp-blue

      .selected-option
        font-size-small()
        margin-left 5px
        margin-right auto

      .disabled-option
        color $grey-500

      svg-icon[empty]
        display none

    .drop-menu-container
      padding 10px
      position absolute
      top 42px
      width 100%

      ul.options
        list-style none
        margin 0
        overflow-y auto
        padding 10px

      li.option
        border-radius 3px
        color $grey-700
        cursor pointer
        font-size-small()
        font-weight 900
        line-height 30px
        margin 0
        padding 0 10px

        &.disabled-option
          color $grey-500
          cursor default
          pointer-events none

        &.selected-option
          color $grey-900
          cursor default
          &.disabled-option
            color $grey-500
            pointer-events none


        &:hover
          background-color $grey-100
          color $mp-blue