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

$mp-list-gutter-height = 8px
$mp-list-gutter-width = 8px
$mp-list-item-margin = 0 $mp-list-gutter-width
$mp-list-item-padding = 10px

+host-styles(mp-list-item)
  box-sizing border-box
  display block
  height 30px

+host-styles(mp-list-item, ':first-child')
  margin-top $mp-list-gutter-height

+host-styles(mp-list-item, ':last-child')
  margin-bottom $mp-list-gutter-height

+prefix-classes('mp-list-item-')
  .container
    &, *
      box-sizing border-box

    align-items center
    background-color $white
    border-radius 3px
    color $grey-700
    cursor pointer
    display flex
    font-family $family-helvetica
    font-size-default()
    font-weight $weight-medium
    height 100%
    line-height 12px
    margin $mp-list-item-margin
    padding 0 $mp-list-item-padding
    text-align left
    user-select none

    &:hover, &.active
      background-color $grey-100
      color $blue-500

    &.static, &.disabled
      cursor default

      &:hover
        background-color $white

    &.disabled
      color $grey-200

      &:hover
        color $grey-200