.gl-new-dropdown-item {
  @include gl-cursor-pointer;
  @include gl-px-2;
  @include gl-my-1;

  /* when there is a scrim `li` items inside the list, the first and last real items
  do not match the selector `:first-child` and `:last-child`,
  that's why we have to target them with a different selector */
  &:first-child,
  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-child(3):not(:last-child) {
    @include gl-mt-0;
  }

  &:last-child,
  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-last-child(3):not(:first-child) {
    @include gl-mb-0;
  }

  &:hover,
  &:focus {
    .gl-new-dropdown-item-content {
      @include gl-bg-gray-50;
    }
  }

  &:active,
  &:focus:active {
    .gl-new-dropdown-item-content {
      @include gl-bg-gray-100;
    }
  }

  &[aria-selected="true"] {
    .gl-new-dropdown-item-content {
      @include gl-bg-gray-50;
    }

    &:hover,
    &:focus {
      .gl-new-dropdown-item-content {
        @include gl-bg-gray-100;
      }

      .gl-new-dropdown-item-check-icon {
        @include gl-text-blue-600
      }
    }
    
    &:active,
    &:focus:active {
      .gl-new-dropdown-item-content {
        @include gl-bg-gray-200;
      }
      
      .gl-new-dropdown-item-check-icon {
        @include gl-text-blue-700
      }
    }
  }

  &:focus-visible {
    outline: none;
  }

  &:active,
  &:focus,
  &:focus:active {
    .gl-new-dropdown-item-content {
      @include gl-focus($inset: true);
    }
  }

  .gl-new-dropdown-item-content {
    @include gl-w-full;
    @include gl-bg-transparent;
    @include gl-align-items-center;
    @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-3;
    @include gl-py-0;
    position: relative;
    @include gl-rounded-base;
    @include gl-text-decoration-none;
    @include gl-text-gray-900;
    @include gl-text-left;
    @include gl-white-space-normal;

    .gl-new-dropdown-item-check-icon {
      @include gl-flex-shrink-0;
      @include gl-mr-3;
      @include gl-text-blue-500;
    }

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

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