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

.p-autocomplete {
  width: 100%;

  .p-autocomplete-input {
    width: 100%;
  }

  &.p-autocomplete-dd {
    .p-autocomplete-input {
      padding-right: 2em;
      border-top-right-radius: $borderRadius;
      border-bottom-right-radius: $borderRadius;
    }

    .p-inputtext:enabled:focus + .p-autocomplete-dropdown {
      .pi {
        color: $input-txt-border-focus-color;
      }
    }

    &.p-autocomplete-multiple {
      .p-autocomplete-multiple-container {
        padding-right: 2em;
      }
    }
  }

  .p-autocomplete-dropdown {
    width: 2em;
    background: transparent !important;
    color: var(--p-select-dropdown-color);
    border: 0 none;
    position: absolute;
    right: 0;
    top: 8px;

    @include transition(color $transitionDuration);

    &:enabled:hover:not(.p-disabled):not([disabled]) {
      color: $input-txt-border-focus-color;
    }
  }

  &.p-autocomplete-multiple {
    .p-autocomplete-multiple-container:not(.p-disabled).p-focus + .p-autocomplete-dropdown {
      .pi {
        color: $input-txt-border-focus-color;
      }
    }

    .p-autocomplete-multiple-container {
      padding: .429em;

      &:not(.p-disabled):hover {
        border-color: $input-txt-border-focus-color;
      }

      &:not(.p-disabled).p-focus {
        border-color: $input-txt-border-focus-color;
      }

      .p-autocomplete-input-token {
        padding: 0 .25em 0 0;
        vertical-align: top;

        input {
          border: none;
          color: $default-text-color;
          font-family: $fontFamily;
          font-size: $fontSize;
          padding: 0;
          margin: 0;
        }
      }

      .p-autocomplete-token {
        font-size: $fontSize;
        padding-right: 8px;
        line-height: 24px;
        background: var(--input-chips-bg-color);
        color: var(--input-chips-txt-color);
        margin-right: 4px;
        border-radius: 4px;
        max-height: 24px;

        & > div {
          display: flex;
          align-items: center;
          padding: 3px;
        }
      }
    }
  }
}

.p-autocomplete-panel {
  background-color: var(--main-body-bg);
  color: $dropdown-item-txt-color;
  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;

  @include custom-scrollbar();

  .p-autocomplete-items {
    padding: 0;

    .p-autocomplete-empty-message {
      align-items: center;
      display: flex;
      height: 36px;
      justify-content: flex-start;
      padding-left: 10px;
    }

    .p-autocomplete-item {
      align-items: center;
      background: var(--main-body-bg);
      display: flex;
      margin: 0;
      padding: $listItemPadding;
      color: $default-text-color;
      @include border-radius(0);

      .user-or-group-container {
        display: flex;
        align-items: center;
        padding: 5px 0;

        label {
          @include text-ellipsis();
          width: 100%;
          margin-left: 10px;
          line-height: 1.6;
          color: $grid-txt-color;
        }
      }
    }

    .p-autocomplete-item:hover, .p-autocomplete-item.p-highlight {
      background-color: $dropdown-user-group-selected-bg-hover-color;
      color: $default-text-color;
    }
  }
}

.p-fluid {
  .p-autocomplete {
    &.p-autocomplete-multiple.p-autocomplete-dd {
      .p-autocomplete-multiple-container {
        width: 100%;
      }
    }

    &.p-autocomplete-dd {
      .p-inputtext {
        width: 100%;
      }
    }
  }
}

.p-autocomplete.p-autocomplete-multiple {
  display: block;

  .p-inputtext {

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

  .p-autocomplete-token {
    margin: 2px;

    @include transition(ease-in-out background-color .15s, ease-in-out color .15s);

    > div {
      margin-right: 5px;
    }

    .p-autocomplete-token-icon {
      font-size: 16px;
      right: 3px;
      vertical-align: middle;
      color: var(--input-chips-icon-color);

      @include transition(ease-in-out color .15s);
    }

    &:hover:not(:disabled) {
      background-color: var(--input-chips-bg-hover-color);
      color: var(--input-chips-txt-hover-color);

      .p-autocomplete-token-icon {
        color: var(--input-chips-icon-hover-color);
      }
    }

    &:active:not(:disabled) {
      background-color: var(--input-chips-bg-pressed-color);
      color: var(--input-chips-txt-color);

      .p-autocomplete-token-icon {
        color: var(--input-chips-icon-color);
      }
    }
  }

  .p-autocomplete-multiple-container {
    padding: 5px 0 5px 8px;
    width: 100%;
    max-height: 160px;

    @include custom-scrollbar();
  }
}

.p-autocomplete-open {
  .p-autocomplete-input {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .p-autocomplete-multiple-container {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .p-autocomplete-dropdown {
    border-color: $default-btn-bg-pressed-color;
  }
}

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

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

.p-autocomplete-overlay {
  background: var(--main-body-bg);
  color: $dropdown-item-txt-color;
  border-radius: 0 0 $borderRadius $borderRadius;
  border: 1px solid $input-txt-border-focus-color;
}