.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
  color: $dropdown-trigger-color;
}

.p-dropdown-label-container {
  overflow: hidden;
}

.p-dropdown {
  width: 100%;
  min-width: 210px;
  border: 1px solid $input-default-border-color;

  @include text-ellipsis();
  @include transition(box-shadow $transitionDuration, border-color $transitionDuration);

  .p-dropdown-label,
  .p-dropdown-label:focus,
  .p-dropdown-label:hover {
    border: none;
    margin-right: 1.5em;
  }

  input.p-dropdown-label:focus,
  input.p-dropdown-label:hover {
    &.p-inputtext {
      border: 0 none;
      margin-right: 1.5em;
    }
  }

  .p-dropdown-trigger {
    width: 2em;
    line-height: 24px;
    text-align: center;
    padding: 0;

    .pi-caret-down {
      color: $lighter-default-text-color;
      line-height: inherit;
      margin-top: -1em;

      &:before {
        content: "\e902";
        font-weight: 600;
      }
    }

    &:hover .p-dropdown-trigger-icon, &:focus .p-dropdown-trigger-icon {
      color: $input-txt-border-focus-color;
    }
  }

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

  &.no-min-width {
   min-width: unset;
  }
}

.p-dropdown-panel {
  background: $dropdown-container-bg-color;
  margin-top: -1px; /* hack to simulate a thin line */
  border: 1px solid $dropdown-overlay-border-color;
  box-shadow: $defaultBoxShadow;
  border-radius: 0 0 $borderRadius $borderRadius;
  max-width: 100vw;

  &.dropdown-group {
    .p-dropdown-items-wrapper .p-dropdown-items .p-dropdown-item {
      padding-left: 25px;
    }
  }

  /* need to be add to panelStyleClass when in inputgroup, because the hack to simulate a thin line is not necessary */
  &.inputgroup {
    margin-top: 0px;
  }

  .p-dropdown-filter-container {
    padding: $headerPadding;
    border-bottom: 1px solid $admin-separator-color;
    background: $dropdown-container-bg-color;

    .p-dropdown-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-dropdown-filter-icon {
      top: 20px;
      right: 10px;

      @include devolutions-dropdown-filter-icon-input();
    }
  }

  .p-dropdown-items-wrapper {
    border-radius: 0 0 $borderRadius $borderRadius;
    @include custom-scrollbar();

    .p-dropdown-items {
      background: $dropdown-container-bg-color;
      padding: 0;

      .p-dropdown-item {
        background: $dropdown-item-bg-color;
        color: $dropdown-item-txt-color;
        margin: 0;
        padding: $listItemPadding;
        @include border-radius(0);

        > td {
          padding: $listItemPadding;
        }

        &.p-highlight {
          font-weight: 600;
          background-color: $dropdown-item-selected-bg-color;
          color: $dropdown-item-selected-txt-color;
        }

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

      .p-dropdown-item-group {
        align-items: center;
        display: flex;
        padding: .829em 0.857em .429em;

        @extend .small-title
      }

      .p-dropdown-empty-message {
        padding: 0.5em;
      }
    }

    .p-scroller {
      min-height: 33px;
    }
  }
}

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

.p-inputgroup {
  .p-dropdown {
    border: none !important;

    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
}

.p-dropdown-panel.dropdown-filter, .p-dropdown.dropdown-filter {
  .all-users-container {
    display: flex;
    align-items: center;

    .all-users-icon {
      margin-right: 10px;
      font-size: 29px;

      &.small {
        width: 24px;
        font-size: 22px;
      }
    }
  }
}

.vault-folder-selector-vault-options,
.entry-tree-selector-entry-options {
  &.scroll {
    max-height: 200px;
    overflow-y: auto;
  }

  .p-dropdown-item {
    &.p-disabled, &.p-disabled * {
      pointer-events: auto !important;
    }
  }

  .p-treenode {
    &.disabled {
      pointer-events: auto;
    }
  }
}
