.gl-dropdown {
  .dropdown-menu {
    @include gl-bg-white;
    @include gl-border-1;
    @include gl-border-gray-200;
    @include gl-mt-2;
    @include gl-mb-2;
    @include gl-p-0;
    @include gl-rounded-base;
    @include gl-shadow-x0-y2-b4-s0;
    width: $gl-dropdown-width;

    .gl-search-box-by-type {
      @include gl-m-3;
    }
  }

  .dropdown-menu li {
    @include gl-p-0;
  }

  .gl-dropdown-inner {
    @include gl-display-flex;
    @include gl-flex-direction-column;
    max-height: $gl-max-dropdown-max-height;

    > :first-child {
      @include gl-pt-3;
    }

    > :last-child {
      @include gl-pb-3;
    }
  }

  .gl-dropdown-contents {
    @include gl-flex-grow-1;
    overflow-y: auto;
  }

  .gl-dropdown-header-top {
    @include gl-border-1;
    @include gl-border-b-solid;
    @include gl-border-gray-200;
    @include gl-display-flex;
    @include gl-font-base;
    @include gl-font-weight-bold;
    @include gl-justify-content-center;
    @include gl-line-height-normal;
    @include gl-m-0;
    @include gl-mb-3;
    @include gl-pb-3;
    @include gl-px-5;
  }

  .gl-dropdown-header {
    @include gl-border-b-1;
    @include gl-border-b-solid;
    @include gl-border-b-gray-200;
  }

  .gl-dropdown-footer {
    @include gl-border-t-1;
    @include gl-border-t-solid;
    @include gl-border-t-gray-200;
    @include gl-py-3;
  }

  .dropdown-toggle {
    // Remove bootstrap's dropdown caret
    &::after {
      @include gl-display-none;
    }

    &.gl-button,
    &.gl-button.btn-block {
      @include gl-pr-3;

      &.btn-sm {
        @include gl-pr-2;
      }
    }

    &.dropdown-toggle-no-caret,
    &.dropdown-toggle-no-caret.btn-sm {
      @include gl-p-3;

      .dropdown-chevron {
        display: none;
      }
    }
  }

  .dropdown-toggle-split {
    &::after {
      @include gl-border-0;
      content: '';
      @include gl-display-block;
      @include gl-w-5;
      @include gl-h-5;
      @include gl-bg-current-color;
      @include mask-chevron-down;
    }

    &.btn-default:not(:disabled)::after {
      @include gl-border-gray-500;
    }

    &.btn-confirm,
    &.btn-info,
    &.btn-success,
    &.btn-danger {
      margin-left: 1px;
    }

    &:disabled,
    &.disabled,
    &[class*='-secondary'] {
      margin-left: -1px;
    }

    &.gl-button {
      @include gl-px-3;

      &.btn-sm {
        @include gl-px-2;
      }
    }
  }

  .gl-dropdown-toggle {
    &.btn-block {
      @include gl-justify-content-space-between;
    }

    .gl-button-text {
      @include gl-display-inline-flex;
    }
  }

  .gl-dropdown-button-text {
    @include gl-mr-auto;
    @include gl-overflow-hidden;
    @include gl-text-overflow-ellipsis;
  }

  // Fix rounded split dropdown button: https://gitlab.com/gitlab-org/gitlab-ui/issues/626
  &.dropdown.show .dropdown-toggle-split {
    @include gl-rounded-top-left-none;
    @include gl-rounded-bottom-left-none;
  }

  // The `&.dropdown` is necessary to strengthen the specificity of these selectors
  &.dropdown {
    &.btn-sm .gl-icon {
      @include gl-mt-0;
      @include gl-mb-0;

      &.dropdown-chevron {
        @include gl-h-5;
        @include gl-w-5;
      }
    }

    .gl-button .dropdown-chevron,
    .gl-button.btn-block .dropdown-chevron,
    .dropdown-chevron {
      @include gl-ml-2;
      @include gl-mr-0;
    }
  }

  .dropdown-icon {
    @include gl-mr-2;
  }

  .dropdown-icon-text,
  .dropdown-icon-only {
    @include gl-pl-3;
  }

  .dropdown-icon-only {
    .dropdown-icon,
    .gl-button-icon.gl-button-icon {
      @include gl-mr-0;
    }

    &.btn-sm .dropdown-chevron {
      @include gl-mx-0;
    }
  }

  .split-content-button {
    @include gl-px-4;
  }

  .icon-split-content-button {
    @include gl-pl-3;

    .dropdown-icon {
      @include gl-mr-0;
    }
  }
}