.p-multiselect {
  @apply inline-flex cursor-pointer relative select-none bg-white border border-gray-50 transition-colors rounded-lg outline-transparent;

  &:not(.p-disabled) {
    @apply hover:border-primary hover:text-gray-90;
  }

  &.p-focus {
    @apply border-primary text-gray-90 outline-0 outline-none
  }

  &.p-variant-filled {
    &:not(.p-disabled) {
      &:hover {}

      &.p-focus {}
    }
  }

  &.p-invalid {
    @apply border-danger text-danger;
  }

  &.p-disabled {
    @apply bg-gray-25 opacity-100;
  }

  &-dropdown {
    @apply flex items-center justify-center shrink-0 bg-transparent rounded-r-lg pr-4 py-2 text-gray-90 text-body-2;
  }

  &-clear-icon {
    @apply absolute top-1/2 -mt-2;
  }

  &-label-container {
    @apply overflow-hidden flex-auto cursor-pointer;
  }

  &-label {
    @apply flex items-center gap-2 whitespace-nowrap cursor-pointer overflow-hidden text-ellipsis px-4 py-2 text-gray-90;

    &.p-placeholder {
      @apply text-gray-50;

      .p-multiselect.p-invalid & {}
    }

    .p-multiselect.p-invalid & {}

    .p-chip {
      @apply px-3 py-0 rounded-full bg-support-2;
    }

    &:has(.p-chip) { }
  }

  &-label-empty {
    @apply overflow-hidden opacity-0;
  }

  & &-overlay {
    @apply min-w-full;
  }

  &-overlay {
    @apply absolute top-0 left-0 mt-2 bg-white text-gray-90 border-0 border-none rounded-lg drop-shadow-lg
      before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none
      after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none;
  }

  &-header {
    @apply flex items-center gap-2 px-4 py-2;

    .p-checkbox {
      @apply me-2;
    }
  }

  &-filter-container {
    @apply flex-auto;
  }

  &-filter {
    @apply w-full;
  }

  &-list-container {
    @apply overflow-auto;
  }

  &-list {
    @apply m-0 p-0 list-none gap-0 flex flex-col;
  }

  &-option {
    @apply cursor-pointer text-body-2 whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-4 py-2 border-0 border-none text-gray-90 transition-colors;

    &:not(.p-multiselect-option-selected):not(.p-disabled).p-focus {
      @apply bg-white text-primary;
    }

    &.p-multiselect-option-selected {
      @apply bg-support-1 text-primary;

      &.p-focus {
        @apply bg-support-1 text-primary;
      }
    }
  }

  &-option-group {
    @apply cursor-auto m-0 px-4 py-2 bg-white text-gray-90 font-semibold;
  }

  &-empty-message {
    @apply px-4 py-2;
  }

  &-fluid {
    @apply flex w-full;
  }

  &-sm &-label {
    @apply px-3 py-1.5;
  }

  &-sm &-dropdown .p-icon { }

  &-lg &-label {
    @apply py-3;
  }

  &-lg &-dropdown .p-icon { }
}
