@mixin gl-tmp-dropdown-item-style {
  @include gl-align-items-center;
  @include gl-bg-transparent;
  @include gl-border-0;
  @include gl-display-flex;
  @include gl-font-base;
  @include gl-font-weight-normal;
  @include gl-line-height-normal;
  @include gl-px-5;
  @include gl-py-0;
  position: relative;
  @include gl-rounded-0;
  @include gl-shadow-none;
  @include gl-text-gray-900;
  @include gl-text-left;
  @include gl-w-full;
  @include gl-white-space-normal;
}

.gl-dropdown-item {
  .dropdown-item {
    @include gl-tmp-dropdown-item-style;
    @include gl-cursor-pointer;

    .gl-avatar {
      @include gl-flex-shrink-0;
      @include gl-mr-3;
    }

    .gl-dropdown-item-check-icon {
      @include gl-flex-shrink-0;
      @include gl-mr-3;
      @include gl-text-gray-700;
    }

    .gl-dropdown-item-icon {
      @include gl-flex-shrink-0;
      @include gl-mr-3;
    }

    .gl-dropdown-item-text-primary {
      @include gl-m-0;
    }

    .gl-dropdown-item-text-secondary {
      @include gl-m-0;
      @include gl-text-gray-700;
    }

    .gl-dropdown-item-text-wrapper {
      @include gl-min-w-0;
      @include gl-flex-grow-1;
      @include gl-mr-3;
      @include gl-py-3;
    }

    // make sure the text color is not overridden
    &.text-danger {
      @include gl-text-red-500;
    }

    &.disable-hover {
      @include gl-text-decoration-none;
    }

    &:disabled {
      @include gl-text-gray-500;

      .gl-new-dropdown-item-check-icon {
        @include gl-reset-color;
      }

      .gl-new-dropdown-item-text-secondary {
        @include gl-reset-color;
      }

      .gl-avatar {
        @include gl-opacity-7;
      }
    }

    &:not(.disable-hover):hover,
    &:active,
    &:focus,
    &.is-focused {
      @include gl-bg-gray-50;
      @include gl-text-decoration-none;
      @include gl-text-gray-900;

      // make sure the text color is not overridden
      &.text-danger {
        @include gl-text-red-500;
      }

      .avatar {
        @include gl-border-white;
      }
    }

    &:active,
    &:focus,
    &:focus:active {
      @include gl-focus($inset: true);
    }
  }
}