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

+host-styles(mp-settings-li)
  display flex

.mp-settings-li
  display flex
  flex 1

+prefix-classes('mp-settings-li-')
  .label
    align-items center
    display flex
    font-weight 500
    height 60px
    margin-left 20px
    min-width 290px
    width 290px

  .value-cont
    align-items center
    border 2px solid transparent
    border-radius 4px
    display flex
    height 36px
    margin 9px 9px 9px 0
    padding 2px 2px 2px 16px
    width 100%

    input
      background-color white
      border 0
      box-shadow none
      color grey-700
      outline 0
      padding-left 0
      width 100%
      &:not(:first-child)
        border-left 2px solid $grey-100
        border-radius 0
        padding-left 5px

    input[name='country-code']
        width 35px

    mp-tag
      margin-right 4px

    .menu-container
      position relative

      mp-tag-selector
        margin-top 20px

    .menu-list
      max-height 250px

  .button
    align-items center
    display flex
    margin-left auto
    margin-right 20px

    .icon-btn
      cursor pointer
      svg-icon-style($grey-300, $blue-300, speed: 0)

    &.trash
      svg-icon-style($grey-300, $mp-red, speed: 0)

  slot
    font-size 13px

  &.disabled
    opacity 0.5

  &.editing
    .value-cont
      border 2px solid $grey-100

    .button
      margin-right 5px

      .save-button
        margin-left 8px
        width 62px

  &.uploading
    .file-save-button
      margin-left 8px
      width 130px

    .hidden
      display none

    .li-button
      input
        display none