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

+prefix-classes('builder-pane-')
  // pane-title
  .title
    align-items center
    border-bottom 1px solid $grey-100
    color $grey-700
    display flex
    flex none
    font-size-small()
    font-weight 900
    height 48px
    position relative

    .upsell-header
      border 1px solid $grey-150
      border-radius 11px
      display flex
      margin-left 90px
      svg-icon-style($mp-purple)
      width 355px

      .upsell-text
        color $grey-700
        line-height 22px

        &.upgrade-link
          color $mp-purple
          margin-left 2px
          text-decoration none

          &:hover
            opacity 0.7

    .title-button
      align-items center
      cursor pointer
      display flex
      height 100%
      justify-content center
      padding 0 10px
      position absolute
      svg-icon-style($grey-500, $grey-700)
      top 0

      &.back-button
        left 0

      &.close-button
        right 0

    .title-label
      ellipsis()
      padding 0 30px
      text-align center
      text-transform uppercase
      width 100%

  // screen-options-list
  ul.screen-options-list
    flex 1 1 auto
    margin 0 10px
    overflow auto
    .matches-search
      color $mp-blue

    &:last-of-type
      border-bottom none

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

  .screen-options-list li.list-option
    align-items center
    border-radius 3px
    color $grey-700
    cursor pointer
    display flex
    font-size-small()
    font-weight $weight-medium
    justify-content flex-end
    line-height 12px
    min-height 30px

    &:first-child
      margin-top 10px

    &:last-child
      margin-bottom 10px

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

    &.list-option-upsell, $.list-option-alert
      .option-label
        color $grey-500

      .upsell-icon
        margin-right 3px

    &.list-option-alert
      .upsell-icon
        svg-icon-style($blue-900)

    &.list-option-upsell
      .upsell-icon
        svg-icon-style($mp-purple)

    &.list-option-active
      background-color $grey-100
      color $mp-blue

      .option-icon
        svg-icon-style($mp-blue, pos-top: 1px)

      .option-secondary-action
        display flex

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

    &.list-empty
      font-size-small()
      font-weight $weight-medium
      justify-content center
      pointer-events none

    .option-icon
        svg-icon-style(pos-top: 1px)

  // screen-option
  .option-icon
    padding-left 5px
    svg-icon-style($grey-700)

  .option-label
    ellipsis()
    flex 1 1
    font-size-small()
    font-weight $weight-medium
    line-height 1.5
    padding-left 8px

    .highlight-match
      color $mp-blue

  li.list-option.list-option-selected
    .option-icon
      svg-icon-style($grey-900)

    .option-label
      color $grey-900
      cursor default
      font-weight 900

  li.list-option.list-option-active .caret-icon
      opacity 1

  .caret-icon
    opacity 0
    svg-icon-style($mp-blue)

  // small-caret-icon
  .small-caret
    height 18px
    position relative
    right 4px
    top -2px

  // pane-loader
  .loading
    align-items center
    display flex
    height 80px
    justify-content center

    mp-spinner
      height 30px
      width 30px