.form .el-select {
  width: 100%;
}

// Tags inside select input component
.el-tag,
.el-select .el-select__tags .el-tag--info {
  @apply bg-gray-100 border border-gray-200 text-gray-900;
}

.el-select__tags:hover {
  @apply cursor-pointer;
}

.el-select .el-select__wrapper{
  min-height: 40px;
}

// Select input
.el-select {
  --el-select-border-color-hover: unset;

  &:hover {
    @apply border-gray-400;
  }

  .el-input {
    min-height: 40px;
    @apply h-fit leading-10 w-full;

    // Override box-shadow with border properties
    &.is-disabled .el-input__wrapper:hover {
      box-shadow: none;
    }

    &.is-focus .el-input__wrapper,
    .el-input__wrapper.is-focus {
      box-shadow: none !important;
      border: 1px solid var(--el-input-focus-border-color);
    }

    &__suffix-inner {
      @apply absolute right-3 top-3;
    }
  }

  &__collapse-tags {
    @apply max-w-sm;
  }

  &--disabled {
    .el-select__tags {
      @apply cursor-text;
    }
  }
}

// Select input as input group append
// Override box-shadow with border properties
.el-input-group--append .el-input-group__append .el-select {
  &:hover .el-input__wrapper {
    border: 1px solid var(--el-input-hover-border-color);
    box-shadow: none !important;
    margin-left: -1px;
  }

  .el-input.is-focus .el-input__wrapper {
    border: 1px solid var(--el-input-focus-border-color);
    box-shadow: none !important;
    margin-left: -1px;
  }

  .el-input .el-input__wrapper {
    box-shadow: none !important;
    margin-left: -1px;
  }
}

// Selected icon for single selection
.el-select-dropdown
  .el-select-dropdown__item:not(.no-checkmark).selected::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  border-top: none;
  border-right: none;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--el-color-primary);
  mask: url('data:image/svg+xml;utf8,%3Csvg class=%27icon%27 width=%27200%27 height=%27200%27 viewBox=%270 0 1024 1024%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill=%27currentColor%27 d=%27M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z%27%3E%3C/path%3E%3C/svg%3E')
    no-repeat;
  mask-size: 100% 100%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  margin-left: 1rem;
}

// Select dropdown popover
.el-select__popper {
  box-shadow: 0px 2px 4px rgb(0 0 0 / 25%) !important;
  border: none !important;

  .el-select-dropdown {
    @apply p-2;

    & .el-select-dropdown__list {
      @apply flex flex-col gap-1 py-0;
      margin: 0 !important;
    }

    // For multiple selection dropdowns
    .el-select-dropdown__item.selected::after {
      @apply bg-primary-600;
    }

    & .el-select-dropdown__item {
      padding: 0 52px 0 20px;
      @apply text-black rounded hover:bg-gray-50 flex items-center min-h-10 h-fit leading-5 py-1;

      // Select dropdown item prefix
      span.prefix {
        @apply mr-2 font-light text-gray-400;
      }

      // Select dropdown item selected
      &.selected,
      &.selected.hover {
        @apply font-medium bg-primary-50 text-gray-900;
      }

      // Select dropdown item on hover
      &.hover,
      &:hover {
        @apply bg-gray-50;
      }
    }
  }
}
