:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-dropdown-margin-x: 0px;
  --neeto-ui-dropdown-margin-y: 0.375rem;
  --neeto-ui-dropdown-padding-x: 0px;
  --neeto-ui-dropdown-padding-y: 0px;
  --neeto-ui-dropdown-border-width: 1px;
  --neeto-ui-dropdown-border-color: rgb(var(--neeto-ui-gray-400));
  --neeto-ui-dropdown-border-radius: var(--neeto-ui-rounded);
  --neeto-ui-dropdown-box-shadow: var(--neeto-ui-shadow-lg);

  // Popup
  --neeto-ui-dropdown-popup-width: auto;
  --neeto-ui-dropdown-popup-min-width: 10.5rem;
  --neeto-ui-dropdown-popup-max-height: 30rem;
  --neeto-ui-dropdown-popup-bg-color: rgb(var(--neeto-ui-white));
  --neeto-ui-dropdown-popup-border-radius: var(--neeto-ui-rounded);
  --neeto-ui-dropdown-popup-z-index: 99999;

  // Popup Menu
  --neeto-ui-dropdown-popup-menu-padding-x: 0px;
  --neeto-ui-dropdown-popup-menu-padding-y: 0.25rem;

  // Item
  --neeto-ui-dropdown-item-padding-y: 0.375rem;
  --neeto-ui-dropdown-item-padding-x: 0.75rem;
  --neeto-ui-dropdown-item-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-dropdown-item-font-weight: var(--neeto-ui-font-normal);
  --neeto-ui-dropdown-item-line-height: 1.143;
  --neeto-ui-dropdown-item-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-dropdown-item-bg-color: rgb(var(--neeto-ui-white));
  --neeto-ui-dropdown-item-white-space: nowrap;
  --neeto-ui-dropdown-item-min-height: 2rem;
  --neeto-ui-dropdown-item-gap: 0.5rem;
  --neeto-ui-dropdown-item-border-radius: 0px;

  // Item - Active
  --neeto-ui-dropdown-item-active-bg-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-dropdown-item-active-color: rgb(var(--neeto-ui-white));

  // Item - Disabled
  --neeto-ui-dropdown-item-disabled-opacity: 0.5;

  // Item - Hover
  --neeto-ui-dropdown-item-hover-bg-color: rgb(var(--neeto-ui-gray-200));

  // Item - Focus
  --neeto-ui-dropdown-item-focus-bg-color: rgb(var(--neeto-ui-gray-200));

  // Divider
  --neeto-ui-dropdown-divider-height: 1px;
  --neeto-ui-dropdown-divider-bg-color: rgb(var(--neeto-ui-gray-200));
  --neeto-ui-dropdown-divider-margin: 0.25rem;
}

.neeto-ui-dropdown {
  margin: var(--neeto-ui-dropdown-margin-y) var(--neeto-ui-dropdown-margin-x);

  .tippy-content:not(.neeto-ui-popover .tippy-content) {
    position: relative;
    padding: var(--neeto-ui-dropdown-padding-y) var(--neeto-ui-dropdown-padding-x);
    z-index: 1;
  }

  box-shadow: var(--neeto-ui-dropdown-box-shadow) !important;
  border-radius: var(--neeto-ui-dropdown-border-radius) !important;
  border: var(--neeto-ui-dropdown-border-width) solid var(--neeto-ui-dropdown-border-color);
}

.neeto-ui-dropdown__popup {
  width: var(--neeto-ui-dropdown-popup-width);
  min-width: var(--neeto-ui-dropdown-popup-min-width);
  max-height: var(--neeto-ui-dropdown-popup-max-height);
  overflow-y: auto;
  background-color: var(--neeto-ui-dropdown-popup-bg-color);
  border-radius: var(--neeto-ui-dropdown-popup-border-radius);
  z-index: var(--neeto-ui-dropdown-popup-z-index);

  @media (max-height: 1000px) {
    max-height: calc(40vh - 3.125rem);
  }

  li,
  .neeto-ui-dropdown--item {
    display: flex;
    cursor: pointer;
    position: relative;
    white-space: var(--neeto-ui-dropdown-item-white-space);
    line-height: var(--neeto-ui-dropdown-item-line-height);
    transition: var(--neeto-ui-transition);
    font-size: var(--neeto-ui-dropdown-item-font-size);
    font-weight: var(--neeto-ui-dropdown-item-font-weight);
    background-color: var(--neeto-ui-dropdown-item-bg-color);
    color: var(--neeto-ui-dropdown-item-color);
    padding: var(--neeto-ui-dropdown-item-padding-y) var(--neeto-ui-dropdown-item-padding-x);
    min-height: var(--neeto-ui-dropdown-item-min-height);
    gap: var(--neeto-ui-dropdown-item-gap);
    text-decoration: none;
    outline-color: transparent;
    border-radius: var(--neeto-ui-dropdown-item-border-radius);

    &.disabled {
      cursor: not-allowed;
      opacity: var(--neeto-ui-dropdown-item-disabled-opacity);
    }

    &:hover {
      background-color: var(--neeto-ui-dropdown-item-hover-bg-color);
    }

    &:focus {
      background-color: var(--neeto-ui-dropdown-item-focus-bg-color);
    }

    &.active {
      color: var(--neeto-ui-dropdown-item-active-color);
      background-color: var(--neeto-ui-dropdown-item-active-bg-color);
    }
  }

  .neeto-ui-dropdown__popup-menu {
    padding: var(--neeto-ui-dropdown-popup-menu-padding-y) var(--neeto-ui-dropdown-popup-menu-padding-x);
  }

  .neeto-ui-dropdown__popup-menu-item {
    all: unset;
    display: block;
  }

  .neeto-ui-dropdown__popup-menu-item-btn {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: var(--neeto-ui-dropdown-item-white-space);
    line-height: var(--neeto-ui-dropdown-item-line-height);
    transition: var(--neeto-ui-transition);
    font-size: var(--neeto-ui-dropdown-item-font-size);
    font-weight: var(--neeto-ui-dropdown-item-font-weight);
    background-color: var(--neeto-ui-dropdown-item-bg-color);
    color: var(--neeto-ui-dropdown-item-color);
    padding: var(--neeto-ui-dropdown-item-padding-y) var(--neeto-ui-dropdown-item-padding-x);
    min-height: var(--neeto-ui-dropdown-item-min-height);
    gap: var(--neeto-ui-dropdown-item-gap);
    text-decoration: none;
    outline-color: transparent;
    border-radius: var(--neeto-ui-dropdown-item-border-radius);

    &--disabled {
      cursor: not-allowed;
      opacity: var(--neeto-ui-dropdown-item-disabled-opacity);
    }

    &:hover:not(:disabled):not(.neeto-ui-dropdown__popup-menu-item-btn--active) {
      background-color: var(--neeto-ui-dropdown-item-hover-bg-color);
    }

    &:focus:not(:disabled):not(.neeto-ui-dropdown__popup-menu-item-btn--active) {
      background-color: var(--neeto-ui-dropdown-item-focus-bg-color);
    }

    &--active {
      color: var(--neeto-ui-dropdown-item-active-color);
      background-color: var(--neeto-ui-dropdown-item-active-bg-color);
    }

    &--style-danger {
      --neeto-ui-dropdown-item-color: rgb(var(--neeto-ui-error-800));
    }
  }

  .neeto-ui-dropdown__popup-divider {
    all: unset;
    width: 100%;
    display: flex;
    height: var(--neeto-ui-dropdown-divider-height);
    background-color: var(--neeto-ui-dropdown-divider-bg-color);
    margin: var(--neeto-ui-dropdown-divider-margin) 0;
    pointer-events: none;
  }

  .neeto-ui-dropdown__popup-menu-item-btn__suffix {
    margin-left: auto;
  }
}

.neetix-dropdown {
  --neeto-ui-dropdown-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-dropdown-item-active-bg-color: rgb(var(--neeto-ui-gray-800));
}
