// Dropdown popper
.el-dropdown__popper {
  --el-dropdown-menuItem-hover-color: black;
  --el-dropdown-menu-box-shadow: 0px 2px 4px
    rgba(0, 0, 0, 0.25);

  .el-scrollbar {
    @apply max-h-100 overflow-auto;
  }

  .el-dropdown__list {
    @apply p-2;
    border-radius: 7px;
  }
}

// Dropdown menu item
.el-dropdown-menu__item,
.el-dropdown-menu__item a {
  @apply flex items-center text-black px-4 h-10 text-xs;
  border-radius: 4px;

  &:not(:last-of-type) {
    @apply mb-1;
  }

  // Icon
  i {
    @apply mr-2;
  }

  i:not(.fa-trash-can), svg {
    @apply text-gray-400;
  }

  // Selected state
  &.is-selected,
  &:focus.is-selected {
    @apply relative bg-primary-50 text-gray-900 cursor-default;
    i {
      @apply mr-3 text-primary-600;
    }
  }

  // Active state
  &.is-active,
  &:focus.is-active {
    @apply relative bg-gray-50 text-gray-400 cursor-default;
    i {
      @apply mr-3 text-gray-400;
    }
  }

  // Focus state
  &:not(.is-selected):not(.is-disabled):not(:hover):focus {
    @apply text-black bg-white;
  }

  // Hover
  &:not(.is-disabled):hover {
    @apply text-black bg-gray-50;
  }

  &.is-disabled i {
    @apply text-gray-300;
  }
}

// Title and separator
.el-dropdown-title {
  @apply block font-semibold uppercase text-gray-400 tracking-wider text-2xs leading-4.5 px-4 mt-3 mb-1;
}

.el-dropdown-separator {
  @apply mx-4 my-2 border-gray-50;
}

.el-dropdown-menu--large {
  @apply p-0;
}

.el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected,
.el-select-dropdown .el-select-dropdown__item.selected {
  @apply text-primary-500;
}
