dropdown-bootstrap.scss

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;

  @include caret();
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--pgn-elevation-dropdown-zindex);
  display: none;
  float: left;
  min-width: var(--pgn-size-dropdown-min-width);
  padding: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-base);
  margin: var(--pgn-spacing-dropdown-spacer) 0 0;
  color: var(--pgn-color-dropdown-text);
  text-align: left;
  list-style: none;
  background-color: var(--pgn-color-dropdown-bg);
  background-clip: padding-box;
  border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border);

  @include font-size(var(--pgn-typography-dropdown-font-size));
  @include border-radius(var(--pgn-size-dropdown-border-radius-base));
  @include box-shadow(var(--pgn-elevation-dropdown-box-shadow));

  &[x-placement^="top"],
  &[x-placement^="right"],
  &[x-placement^="bottom"],
  &[x-placement^="left"] {
    right: auto;
    bottom: auto;
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-left {
      right: auto;
      left: 0;
    }

    .dropdown-menu#{$infix}-right {
      right: 0;
      left: auto;
    }
  }
}

.dropup {
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--pgn-spacing-dropdown-spacer);
  }

  .dropdown-toggle {
    @include caret(up);
  }
}

.dropright {
  .dropdown-menu {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: var(--pgn-spacing-dropdown-spacer);
  }

  .dropdown-toggle {
    @include caret(right);

    &::after {
      vertical-align: 0;
    }
  }
}

.dropleft {
  .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: var(--pgn-spacing-dropdown-spacer);
  }

  .dropdown-toggle {
    @include caret(left);

    &::before {
      vertical-align: 0;
    }
  }
}

.dropdown-divider {
  @include nav-divider(var(--pgn-color-dropdown-divider-bg), var(--pgn-spacing-dropdown-divider-margin-y), true);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);
  clear: both;
  font-weight: var(--pgn-typography-font-weight-normal);
  color: var(--pgn-color-dropdown-link-base);
  text-align: inherit;
  text-decoration: var(--pgn-typography-dropdown-item-text-decoration);
  white-space: nowrap;
  background-color: transparent;
  border: 0;

  @if var(--pgn-spacing-dropdown-padding-y-base) == 0 {
    &:first-child {
      @include border-top-radius(var(--pgn-size-dropdown-border-radius-inner));
    }

    &:last-child {
      @include border-bottom-radius(var(--pgn-size-dropdown-border-radius-inner));
    }
  }

  @include hover-focus() {
    color: var(--pgn-color-dropdown-link-hover-base);
    text-decoration: none;

    @include gradient-bg(var(--pgn-color-dropdown-link-hover-bg));
  }

  &.active,
  &:active {
    color: var(--pgn-color-dropdown-link-active-base);
    text-decoration: none;

    @include gradient-bg(var(--pgn-color-dropdown-link-active-bg));
  }

  &.disabled,
  &:disabled {
    color: var(--pgn-color-dropdown-link-disabled);
    pointer-events: none;
    background-color: transparent;

    @if $enable-gradients {
      background-image: none;
    }
  }
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: var(--pgn-spacing-dropdown-padding-header);
  margin-bottom: 0;
  color: var(--pgn-color-dropdown-header);
  white-space: nowrap;

  @include font-size(var(--pgn-typography-font-size-sm));
}

.dropdown-item-text {
  display: block;
  padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);
  color: var(--pgn-color-dropdown-link-base);
}