tailwind.scss

.multiselect {
  @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-300 rounded-sm bg-white text-base leading-snug outline-hidden;

  &.is-disabled {
    @apply cursor-default bg-gray-100;
  }

  &.is-open {
    @apply rounded-b-none;
  }

  &.is-open-top {
    @apply rounded-t-none;
  }

  &.is-active {
    @apply ring-3 ring-green-500/30;
  }
}

.multiselect-wrapper {
  @apply relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-hidden;
}

.multiselect-single-label {
  @apply flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-single-label-text {
  @apply text-ellipsis overflow-hidden block whitespace-nowrap max-w-full;
}

.multiselect-multiple-label {
  @apply flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-search {
  @apply w-full absolute inset-0 outline-hidden focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded-sm pl-3.5 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-tags {
  @apply grow shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2;
}

.multiselect-tag {
  @apply bg-green-500 text-white text-sm font-semibold py-0.5 pl-2 rounded-sm mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1;

  &.is-disabled {
    @apply pr-2 opacity-50 rtl:pl-2;
  }
}

.multiselect-tag-wrapper {
  @apply whitespace-nowrap overflow-hidden text-ellipsis;
}

.multiselect-tag-wrapper-break {
  @apply whitespace-normal break-all;
}

.multiselect-tag-remove {
  @apply flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10;
}

.multiselect-tag-remove-icon {
  @apply bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3;
}

.multiselect-tag-remove:hover .multiselect-tag-remove-icon {
  @apply opacity-60;
}

.multiselect-tags-search-wrapper {
  @apply inline-block relative mx-1 mb-1 grow shrink h-full;
}

.multiselect-tags-search {
  @apply absolute inset-0 border-0 outline-hidden focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full;
}

.multiselect-tags-search-copy {
  @apply invisible whitespace-pre-wrap inline-block h-px;
}

.multiselect-placeholder {
  @apply flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5;
}

.multiselect-caret {
  @apply bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 shrink-0 grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5;

  &.is-open {
    @apply rotate-180 pointer-events-auto;
  }
}

.multiselect-clear {
  @apply pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5;
}

.multiselect-clear-icon {
  @apply bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block;
}

.multiselect-spinner {
  @apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0 rtl:mr-0 rtl:ml-3.5;
}

.multiselect-inifite {
  @apply flex items-center justify-center w-full;
}

.multiselect-inifite-spinner {
  @apply bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin shrink-0 grow-0 m-3.5;
}

.multiselect-dropdown {
  @apply max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b-sm;

  &.is-top {
    @apply -translate-y-full top-px bottom-auto rounded-b-none rounded-t-sm;
  }

  &.is-hidden {
    @apply hidden;
  }
}

.multiselect-options {
  @apply flex flex-col p-0 m-0 list-none;
}

.multiselect-group {
  @apply p-0 m-0;
}

.multiselect-group-label {
  @apply flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal;

  &.is-pointable {
    @apply cursor-pointer;
  }

  &.is-pointed {
    @apply bg-gray-300 text-gray-700;
  }

  &.is-selected {
    @apply bg-green-600 text-white;
  }

  &.is-disabled {
    @apply bg-gray-100 text-gray-300 cursor-not-allowed;
  }

  &.is-selected.is-pointed {
    @apply bg-green-600 text-white opacity-90;
  }

  &.is-selected.is-disabled {
    @apply text-green-100 bg-green-600/50 cursor-not-allowed;
  }
}

.multiselect-group-options {
  @apply p-0 m-0;
}

.multiselect-option {
  @apply flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3;

  &.is-pointed {
    @apply text-gray-800 bg-gray-100;
  }

  &.is-selected {
    @apply text-white bg-green-500;
  }

  &.is-disabled {
    @apply text-gray-300 cursor-not-allowed;
  }

  &.is-selected.is-pointed {
    @apply text-white bg-green-500 opacity-90;
  }

  &.is-selected.is-disabled {
    @apply text-green-100 bg-green-500/50 cursor-not-allowed;
  }
}

.multiselect-no-options {
  @apply py-2 px-3 text-gray-600 bg-white text-left rtl:text-right;
}

.multiselect-no-results {
  @apply py-2 px-3 text-gray-600 bg-white text-left rtl:text-right;
}

.multiselect-fake-input {
  @apply bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent;
}

.multiselect-assistive-text {
  @apply absolute -m-px w-px h-px overflow-hidden;
  clip: rect(0 0 0 0);
}

.multiselect-spacer {
  @apply h-9 py-px box-content;
}