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

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

.p-select-label {
  overflow: hidden;
  padding: 5px 0 5px 8px;
  line-height: 24px;
  font-size: $fontSize;
}

.p-select {
  width: 100%;
  min-width: 210px;
  border: 1px solid $input-default-border-color;
  background: $input-txt-bg-color;
  color: $input-txt-color;

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

  .p-select-label,
  .p-select-label:focus,
  .p-select-label:hover {
    border: none;
    color: $input-txt-color;
    margin-right: 1.5em;
  }

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

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

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

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

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

  &.p-focus {
    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-select-overlay {
  background: var(--main-body-bg);
  color: $dropdown-item-txt-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-select-items .p-select-option {
      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-select-filter-container {
    padding: $headerPadding;
    border-bottom: 1px solid $admin-separator-color;
    background: var(--main-body-bg);

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

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

  .p-select-list-container {
    border-radius: 0 0 $borderRadius $borderRadius;
    @include custom-scrollbar();

    .p-select-list {
      background: var(--main-body-bg);
      padding: 0;

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

        > td {
          padding: $listItemPadding;
        }

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

        &[data-p-focused='true'],
        &.p-focus {
          background-color: $dropdown-item-selected-bg-hover-color;
          color: $dropdown-item-txt-color;
        }

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

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

        @extend .small-title
      }

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

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

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

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

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

.p-select-overlay.dropdown-filter, .p-select.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-select-option {
    &.p-disabled, &.p-disabled * {
      pointer-events: auto !important;
    }
  }

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