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

+host-styles(mp-checkbox-list)
  display block
  overflow auto

$checkbox-label-line-height = 18px

+prefix-classes('mp-checkbox-list-')
  div, li, ul
    box-sizing border-box

  ul.list
    display flex
    flex 1 1 auto
    flex-wrap wrap
    margin 0 10px
    overflow auto
    padding 0

    &:empty
      border-bottom none

  li.checkbox-item
    align-items flex-start
    cursor pointer
    display flex
    padding 6px
    width 100%

    &:last-child
      margin-bottom 10px

    &.focused
      background-color $grey-100
      color $mp-blue

      .checkbox-label
        color $mp-blue

    &.two-columns
      width 50%

    &.three-columns
      width 33%

    &.four-columns
      width 25%

    .checkbox-select-icon
      background-color $white
      border 1px solid $grey-200
      border-radius 3px
      flex 0 0 $checkbox-label-line-height
      height $checkbox-label-line-height
      margin-right 11px
      position relative
      svg-icon-style($grey-900, pos-left: -3px, pos-top: -3px)
      width $checkbox-label-line-height

      svg-icon
        position absolute

      &.color
        svg-icon-style($white, pos-left: -2px, pos-top: -2px)

      &.checkbox-dash
        svg-icon-style($grey-900, pos-left: -3px, pos-top: -3px)

      &.colored
        background-color $mp-blue
        border-color $mp-blue
        svg-icon-style($white, pos-left: -3px, pos-top: -3px)

    .checkbox-label
      color $grey-700
      font-size-small()
      font-weight $weight-medium
      line-height $checkbox-label-line-height
      text-align left

      span.substr.matches-search
        color $mp-blue
        font-weight 600