// Listbuilder
//================================================== //

.listbuilder {
  .listbuilder-content {
    background-color: $listbuilder-bg-color;
    border: 1px solid;
    border-color: transparent $listbuilder-border-color $listbuilder-border-color;
    border-radius: 2px;
    box-sizing: content-box;
    height: 230px;
    margin-bottom: $input-field-bottom-margin;
    width: calc(100% - 2px);
  }

  .toolbar.hidden + .listbuilder-content {
    border-color: $listbuilder-border-color;
  }

  .arrange-placeholder {
    background-color: $listbuilder-bg-color-hover;
    border-color: transparent;
    min-height: 34px;
    opacity: 0.4;

    .handle {
      display: inline-block;
    }
  }

  .toolbar.formatter-toolbar {
    margin-bottom: -1px;

    &.hidden {
      display: none;
    }

    &:not(.standalone) .buttonset [class^='btn']:not(:disabled):hover {
      background-color: $listbuilder-toolbar-btn-hover-bg-color;
    }

    .buttonset {
      [class^='btn'] {
        height: 24px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 4px;
        padding: 0 2px !important;
        width: 24px;

        &:first-child {
          margin-left: 5px;
        }
      }

      > .separator {
        margin-left: 8px;
        margin-right: 8px;
      }
    }
  }

  .handle {
    @include font-size(25);

    color: $listbuilder-icon-color-hover;
    display: none;
    left: 6px;
    position: absolute;
    top: 3px;
  }

  .listview {
    ul {
      min-height: 100%;
      padding: 5px 0;
    }

    li {
      border: 1px solid transparent;
      padding: 9px 20px 8px;
      position: relative;

      &.arrange-dragging.is-touch {
        position: fixed;
      }

      &::after,
      &::before,
      &.is-selected::after {
        content: none;
      }

      &.draggable {
        cursor: move;
      }

      &:hover:not(.is-disabled):not(.is-selected),
      &:focus:not(.is-disabled):not(.is-selected), {
        background-color: $listbuilder-bg-color-hover;

        .handle {
          color: $listbuilder-text-color-hover;
          display: inline-block;
        }

        &:focus {
          border-color: $listbuilder-border-color-focus;
        }

        .item-content p {
          color: $listbuilder-text-color-hover;
        }
      }

      &.is-selected {
        background-color: $listbuilder-bg-color-selected !important;

        &.is-disabled {
          background-color: $listbuilder-bg-color-hover;
        }

        .edit-input {
          background: transparent;

          &::selection {
            background: $listbuilder-input-selection-bg-color;
          }

          &::-ms-selection {
            background: $listbuilder-input-selection-bg-color;
          }

          &::-moz-selection {
            background: $listbuilder-input-selection-bg-color;
          }
        }

        p {
          color: $listbuilder-text-color-selected;
          font-weight: $ids-number-font-weight-bold;
        }

        &:hover:not(.is-disabled),
        &:focus:not(.is-disabled) {
          background-color: $listbuilder-bg-color-selected;

          .handle {
            color: $listbuilder-text-color-selected;
            display: inline-block;
          }

          &:focus {
            border-color: $listbuilder-border-color-focus;
          }
        }
      }

      &.is-editing {
        @include selectable;

        padding: 1px 10px;

        &:hover:not(.is-disabled),
        &:focus:not(.is-disabled) {
          .handle {
            display: none;
          }
        }

        .edit-input {
          border: 0;
          color: $listbuilder-text-color-selected;
          font-weight: $ids-number-font-weight-bold;
        }
      }

      .item-content {
        min-height: 16px;
      }
    }

    .over {
      border: 1px dashed $listbuilder-border-color;
    }
  }
}

html[dir='rtl'] {
  .listbuilder {
    .toolbar.formatter-toolbar {
      .buttonset [class^='btn']:first-child {
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
}

.is-firefox .listbuilder .handle {
  top: 5px;
}