@use '../style/mixins' as *;
@use '../style/variables' as *;
@use '../theme/theme-mode-variables' as *;

.p-multiselect {
  white-space: nowrap;

  &.multi-select-placeholder {
    .p-multiselect-label {
      text-align: start;
    }

    .p-multiselect-clear-icon {
      right: 30px;
    }
  }

  .p-multiselect-label {
    padding: 0 2.3em 0 0;
  }

  &.p-multiSelect-ellipsis {
    width: 18rem;

    .p-multiselect-label-container {
      @include text-ellipsis();
    }
  }
}

.p-multiselect-label-container,
.p-multiselect-label-container:focus,
.p-multiselect-label-container:hover {
  border: none;
  padding: 5px 0 5px 8px;
  line-height: 24px;
  margin-right: 1.5em;
}

.p-multiselect:not(.p-disabled):hover {
  border: 1px solid $input-default-border-hover-color;
}

.p-multiselect:not(.p-disabled).p-focus {
  border: 1px solid $input-default-border-hover-color;
}

.p-multiselect-panel .p-multiselect-items-wrapper {
  background: var(--main-body-bg);
  border-bottom-right-radius: $borderRadius;
  border-bottom-left-radius: $borderRadius;

  @include custom-scrollbar();
}

.p-multiselect {
  background: $dropdown-bg-color;
  border: 1px solid $input-default-border-color;
  @include transition(border-color $transitionDuration, box-shadow $transitionDuration);

  .p-multiselect-label {
    color: $input-txt-color;
    padding-right: 2.3em;
  }

  .p-multiselect-trigger {
    width: 2em;
    line-height: 2em;
    box-sizing: border-box;
    padding: 0;
    text-align: center;

    .pi {
      color: $dropdown-trigger-color;
    }
  }

  &:not(.p-disabled):hover {
    border: 1px solid $input-default-border-hover-color;
  }

  &:not(.p-disabled).p-focus {
    border: 1px solid $input-default-border-hover-color;

    .p-multiselect-trigger {
      .pi {
        color: $dropdown-trigger-color;
      }
    }
  }

  &.p-multiselect-open {
    border: 1px solid $dropdown-overlay-border-color !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

.p-multiselect-panel {
  padding: 0;
  background: var(--main-body-bg);
  min-width: 12em;
  margin-top: -1px; /* hack to simulate a thin line */
  border: 1px solid $dropdown-overlay-border-color;
  border-bottom-right-radius: $borderRadius;
  border-bottom-left-radius: $borderRadius;

  .p-multiselect-header {
    padding: $headerPadding;
    background: var(--main-body-bg);
    border-bottom: 1px solid $dropdown-filter-container-separator-color;
    border-radius: 0;

    .p-multiselect-filter-container {
      padding: $headerPadding;
      border-bottom: 1px solid $dropdown-filter-container-separator-color;
      background: var(--main-body-bg);

      .p-multiselect-filter {
        width: 100%;
        border: none;
        box-sizing: border-box;
        padding-right: 20px;
        padding-left: 0;
        text-overflow: unset;

        &:hover, &:active, &:focus {
          border: none !important;
          box-shadow: none !important;
        }
      }

      .p-multiselect-filter-icon {
        @include devolutions-dropdown-filter-icon-input();
      }
    }

    .p-checkbox {
      margin-right: 8px;
      float: none;
      vertical-align: middle;
    }

    .p-multiselect-close {
      color: $action-btn-default-icon-color;
      font-size: $fontSize;
      @include transition(color $transitionDuration);

      &:hover {
        padding: 0;
        color: $admin-text-hover-color;
      }

      &:focus {
        outline: 0 none;
        color: $input-txt-border-focus-color;
      }
    }
  }

  .p-multiselect-items {
    .p-multiselect-item {
      background: var(--main-body-bg);
      padding: $listItemPadding;

      .p-checkbox {
        position: static;
        margin-top: 0;
        display: inline-block;
        vertical-align: middle;
        padding-right: 10px;
      }

      label {
        padding: 0;
        margin: 0 0 0 0.615em;
        display: inline-block;
        vertical-align: middle;
      }

      &:not(.p-highlight):not(.p-disabled):hover {
        background: $dropdown-item-selected-bg-hover-color;
      }

      &.p-highlight {
        background-color: inherit;
        color: inherit;
      }
    }
  }
}

.p-multiselect-overlay {
  border: 1px solid $dropdown-overlay-border-color;
  box-shadow: $defaultBoxShadow;
  margin-top: -1px; /* hack to simulate a thin line */
  border-radius: 0 0 $borderRadius $borderRadius;
  opacity: 1 !important;

  @include custom-scrollbar();
}

.p-multiselect.p-multiselect-open {
  border-color: $dropdown-overlay-border-color !important; // or $input-txt-border-focus-color
}

.p-multiselect-list, .p-multiselect-header {
  background: var(--main-body-bg);
  color: $dropdown-item-txt-color;
}

.p-multiselect-option-selected {
  background: $dropdown-item-selected-bg-color;
  color: $dropdown-item-selected-txt-color;
}

.p-multiselect-filter {
  margin-left: 8px;
}

.p-multiselect-dropdown {
  width: 28px;
}