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

span.substr.matches-search
  color $grey-900
  font-weight 600

.drop-menu-screen
  display flex
  flex-direction column

+host-styles('mp-items-menu')
  -webkit-overflow-scrolling touch
  display block
  overflow auto

.screen-list-container
  .loading-items
    align-items center
    display flex
    height 80px
    justify-content center

    mp-spinner
      height 30px
      width 30px

  .sections-hint
    color $grey-500
    font-size 12px
    height 12px
    margin-left 18px
    margin-top 8px
    position relative
    top 5px

  .section-divider
    border-top 1px solid $grey-150
    margin 0 10px

  .section-label
    color $grey-700
    font-size 11px
    font-weight $weight-bold
    margin 20px 18px 0
    text-transform uppercase

    .dataset-name
      color $grey-300
      float right

  ul.screen-options-list
    overflow visible

ul.screen-options-list
  flex 1 1 auto
  margin 0 10px
  overflow auto
  padding 0

  &:empty
    border-bottom none

  & + ul.screen-options-list
    border-top 1px solid $grey-150
    margin-top 2px
    padding-top 2px

  .matches-search
    color $mp-blue

li.list-option
  align-items center
  border-radius 3px
  display flex
  font-size 12px
  font-weight $weight-medium

  &:first-child
    margin-top 10px

  &:last-child
    margin-bottom 10px

  // default select mode option selected state
  &.for-select-type.selected
    cursor default
    font-weight $weight-bold

    .option-label
      color $grey-900

    .option-icon
      svg-icon-style($grey-900)

  &.disabled
    opacity 0.2
    pointer-events none

  &.focused
    background-color $grey-100

    &.selectable
      cursor pointer

      .option-label
        color $mp-blue

      .option-icon
        svg-icon-style($mp-blue)

  &.expander
    color $grey-500

    .option-icon
        svg-icon-style($grey-500)

  /* secondary-action */
  .secondary-action
    align-items center
    cursor pointer
    display none
    flex 0
    margin 0 5px 0 10px
    opacity 0

    &.caret
      height 18px
      position relative
      svg-icon-style($mp-blue, size: 16px)
      top 1px

    &.pill
      background-color $white
      border-radius 40px
      color $grey-500
      font-size 11px
      font-weight $weight-bold
      height 18px
      line-height 12px
      padding 0 5px 0 10px
      transition background-color 0.1s

      &.focused, &:hover
        background-color $mp-blue
        color $white

        .pill-caret
          svg-icon-style($white, size: 16px, pos-top: 1px)

      .pill-caret
        position relative
        right -2px
        svg-icon-style($grey-500, size: 16px, pos-top: 1px)
        top 0

      &.disabled
        opacity 0.2
        pointer-events none

  &.focused
    .secondary-action
      display flex
      opacity 1
  /* end secondary-action */

  &.list-empty
    pointer-events none
    justify-content center

  .option-label-section
    flex 1 1
    overflow hidden
    padding 9px 8px

    .option-label
      color $grey-700
      truncate-text()

      &.theme-strong
        font-size 11px
        font-weight $weight-bold
        line-height 11px
        text-transform uppercase

    .option-sub-label
      color $grey-500
      margin-top 6px
      word-wrap break-word

      &.truncate
        truncate-text()

  .option-icon
    display flex
    padding-left 5px
    svg-icon-style($grey-700)

    &.align-right
      order 1
      padding-right 10px

    // The repeated selector is to increase specificity, so that these styles apply even on hover
    &.option-icon
      &[icon='lightning-bolt']
        svg-icon-style($mp-purple)

      &[icon='beta-tag']
        svg-icon-style(size: 32px)

  mp-checkbox
    color inherit
    font-size inherit
    font-weight inherit
    padding 0 6px

    .option-label-section
      padding-left 0

    .option-icon
      &.align-right
        padding-right 0

      &.align-left
        padding-left 0
        padding-right 8px