$pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");

.pf-c-dropdown {
  // Toggle
  --pf-c-dropdown__toggle--PaddingTop: var(--pf-global--spacer--form-element);
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-dropdown__toggle--MinWidth: 0;
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-dropdown__toggle--Color: var(--pf-global--Color--100);
  --pf-c-dropdown__toggle--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-dropdown__toggle--BackgroundColor: transparent;
  --pf-c-dropdown__toggle--before--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-dropdown__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
  --pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
  --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
  --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);

  // Plain
  --pf-c-dropdown__toggle--m-plain--Color: var(--pf-global--Color--200);
  --pf-c-dropdown__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
  --pf-c-dropdown__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
  --pf-c-dropdown__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-dropdown__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-dropdown__toggle--m-plain--child--LineHeight: normal; // remove at breaking change

  // Primary
  --pf-c-dropdown__toggle--m-primary--Color: var(--pf-global--Color--light-100);
  --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
  --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown__toggle--m-primary--disabled--Color: var(--pf-global--Color--100);

  // Secondary
  --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
  --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);

  // toggle button
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);

  // split buttons
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
  --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
  --pf-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-global--spacer--form-element);
  --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-global--spacer--xs);
  --pf-c-dropdown__toggle--m-split-button--child--BackgroundColor: transparent;
  --pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: #{pf-size-prem(-1px)};
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);

  // Split button
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);

  // Split button, action, primary
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);

  // Toggle Arrow
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);

  // Menu
  --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
  --pf-c-dropdown__menu--BoxShadow: var(--pf-global--BoxShadow--md);
  --pf-c-dropdown__menu--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-dropdown__menu--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-dropdown__menu--Top: calc(100% + var(--pf-global--spacer--xs)); // The top of the menu must be pushed down to create space between the toggle and menu
  --pf-c-dropdown__menu--ZIndex: var(--pf-global--ZIndex--sm);
  --pf-c-dropdown--m-top__menu--Top: 0;
  --pf-c-dropdown--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu

  // Menu Item
  --pf-c-dropdown__menu-item--BackgroundColor: transparent;
  --pf-c-dropdown__menu-item--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-dropdown__menu-item--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-dropdown__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-dropdown__menu-item--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-dropdown__menu-item--FontSize: var(--pf-global--FontSize--md);
  --pf-c-dropdown__menu-item--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-dropdown__menu-item--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-dropdown__menu-item--Color: var(--pf-global--Color--dark-100);
  --pf-c-dropdown__menu-item--hover--Color: var(--pf-global--Color--dark-100);
  --pf-c-dropdown__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
  --pf-c-dropdown__menu-item--disabled--BackgroundColor: transparent;
  --pf-c-dropdown__menu-item--m-text--Color: var(--pf-global--Color--dark-200);

  // Menu item icon
  --pf-c-dropdown__menu-item-icon--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-dropdown__menu-item-icon--Width: var(--pf-global--icon--FontSize--lg);
  --pf-c-dropdown__menu-item-icon--Height: var(--pf-global--icon--FontSize--lg);

  // Menu item description
  --pf-c-dropdown__menu-item-description--FontSize: var(--pf-global--FontSize--xs);
  --pf-c-dropdown__menu-item-description--Color: var(--pf-global--Color--dark-200);

  // Groups
  --pf-c-dropdown__group--group--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-dropdown__group-title--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);

  // Image
  --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change
  --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change
  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);

  // Divider
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);

  // badge toggle icon
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;

  // menu
  --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs)); // The top of the menu must be pushed down to create space between the toggle and menu
  --pf-c-dropdown--c-menu--ZIndex: var(--pf-global--ZIndex--sm);
  --pf-c-dropdown--m-top--c-menu--Top: 0;
  --pf-c-dropdown--m-top--c-menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu

  // Dropdown
  --pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth: 0;
  --pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-dropdown--m-full-height__toggle--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-dropdown--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg);


  position: relative;
  display: inline-block;
  max-width: 100%;

  .pf-c-divider {
    margin-top: var(--pf-c-dropdown--c-divider--MarginTop);
    margin-bottom: var(--pf-c-dropdown--c-divider--MarginBottom);

    // Support divider as last item in group to separate groups
    &:last-child {
      --pf-c-dropdown--c-divider--MarginBottom: 0;
    }
  }

  > .pf-c-menu {
    position: absolute;
    top: var(--pf-c-dropdown--c-menu--Top);
    z-index: var(--pf-c-dropdown--c-menu--ZIndex);
  }

  &.pf-m-full-height {
    --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown--m-full-height__toggle--PaddingRight);
    --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown--m-full-height__toggle--PaddingLeft);
    --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth);
    --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth);
    --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth);

    display: inline-flex;
    align-items: center;
    height: 100%;

    .pf-c-dropdown__toggle {
      align-self: stretch;

      &::before {
        border-top-width: var(--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
      }
    }

    &:hover {
      .pf-c-dropdown__toggle::before {
        border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
      }
    }
  }

  &.pf-m-expanded {
    --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
  }
}

.pf-c-dropdown__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: var(--pf-c-dropdown__toggle--MinWidth);
  max-width: 100%;
  padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
  font-size: var(--pf-c-dropdown__toggle--FontSize);
  font-weight: var(--pf-c-dropdown__toggle--FontWeight);
  line-height: var(--pf-c-dropdown__toggle--LineHeight);
  color: var(--pf-c-dropdown__toggle--Color);
  background-color: var(--pf-c-dropdown__toggle--BackgroundColor);
  border: none;

  &::before,
  &.pf-m-action .pf-c-dropdown__toggle-button::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border: var(--pf-c-dropdown__toggle--before--BorderWidth) solid;
    border-color: var(--pf-c-dropdown__toggle--before--BorderTopColor) var(--pf-c-dropdown__toggle--before--BorderRightColor) var(--pf-c-dropdown__toggle--before--BorderBottomColor) var(--pf-c-dropdown__toggle--before--BorderLeftColor);
  }

  &.pf-m-disabled,
  &:disabled {
    --pf-c-dropdown__toggle--m-primary--Color: var(--pf-c-dropdown__toggle--m-primary--disabled--Color);
    --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;

    pointer-events: none;

    &:not(.pf-m-plain),
    &.pf-m-plain.pf-m-text {
      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);

      &::before {
        border: 0;
      }
    }
  }

  &.pf-m-split-button {
    padding: 0;

    &:not(.pf-m-disabled) {
      background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
    }

    > * {
      position: relative;
      padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
      padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
      padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
      padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);

      &:first-child {
        --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft);
      }

      &:last-child {
        --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight);
      }
    }

    &.pf-m-action {
      --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight);
      --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft: var(--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft);

      .pf-c-dropdown__toggle-button {
        margin-right: var(--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight);

        // stylelint-disable max-nesting-depth
        &::before {
          border-left: 0;
        }

        &:last-child {
          --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
        }
        // stylelint-enable
      }

      &.pf-m-primary {
        // stylelint-disable max-nesting-depth, selector-max-class
        > :not(:first-child) {
          border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
        }

        &.pf-m-disabled,
        &[disabled] {
          --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
        }
        // stylelint-enable
      }
    }

    .pf-c-dropdown__toggle-check {
      display: flex;
      align-items: center;
      cursor: pointer;

      > input,
      .pf-c-check {
        cursor: pointer;
        transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
      }
    }

    .pf-c-dropdown__toggle-button {
      color: var(--pf-c-dropdown__toggle-button--Color);
      border: 0;
    }

    .pf-c-dropdown__toggle-text {
      margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
    }
  }

  &.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
    --pf-c-dropdown__toggle--before--BorderWidth: 0;
    --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;

    > * {
      background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
      border: 0;

      &:hover {
        --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
      }

      &:focus {
        --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
      }

      &:active,
      &.pf-m-active {
        --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
      }
    }

    > :first-child {
      border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
      border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
    }

    > :last-child {
      border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
      border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
    }
  }

  &:not(.pf-m-action):not(.pf-m-secondary):hover,
  &.pf-m-action .pf-c-dropdown__toggle-button:hover {
    &::before {
      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
    }
  }

  &:not(.pf-m-action):not(.pf-m-secondary):focus,
  &.pf-m-action .pf-c-dropdown__toggle-button:focus {
    &::before {
      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);

      border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
    }
  }

  &:not(.pf-m-action):not(.pf-m-secondary):active,
  &:not(.pf-m-action):not(.pf-m-secondary).pf-m-active,
  &.pf-m-action .pf-c-dropdown__toggle-button:active {
    &::before {
      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);

      border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
    }
  }

  .pf-m-expanded > &:not(.pf-m-action):not(.pf-m-secondary),
  .pf-m-expanded > &.pf-m-action .pf-c-dropdown__toggle-button {
    &::before {
      --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);

      border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
    }
  }

  &.pf-m-plain {
    --pf-c-dropdown__toggle-icon--Color: var(--pf-c-dropdown--m-plain__toggle-icon--Color);

    &:not(.pf-m-text) {
      --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
      --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);

      display: inline-block;
      color: var(--pf-c-dropdown__toggle--m-plain--Color);

      // remove at breaking change
      > * {
        line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
      }
    }

    &::before {
      border: 0;
    }

    &:hover,
    &:focus,
    &:active,
    &.pf-m-active,
    .pf-m-expanded > & {
      --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
      --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-c-dropdown--m-plain--hover__toggle-icon--Color);
    }

    &.pf-m-disabled,
    &:disabled {
      --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
    }
  }

  &.pf-m-primary {
    --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
    --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
    --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);

    border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);

    &::before,
    .pf-c-dropdown__toggle-button::before {
      border: 0;
    }

    &:hover {
      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
    }

    &:focus {
      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
    }

    &:active,
    &.pf-m-active {
      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
    }

    .pf-m-expanded > & {
      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
    }
  }

  &.pf-m-secondary {
    border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);

    &:not(.pf-m-disabled):not([disabled]) {
      --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);

      &::before {
        border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
        border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
      }
    }

    &:hover {
      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
    }

    &:focus {
      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
    }

    &:active,
    &.pf-m-active {
      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
    }

    .pf-m-expanded > & {
      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
      --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
    }
  }

  > .pf-c-badge {
    --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
    --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
  }

  .pf-c-dropdown__toggle-text {
    @include pf-text-overflow;
  }
}

.pf-c-dropdown__toggle-text {
  flex: 0 1 auto;
}

.pf-c-dropdown__toggle-icon {
  margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
  margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
  line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);

  // stylelint-disable-next-line
  .pf-c-dropdown.pf-m-top.pf-m-expanded & {
    transform: rotate(var(--pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate));
  }
}

// Toggle image
.pf-c-dropdown__toggle-image {
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
  margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
  margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
  margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
  line-height: 1;

  &:last-child {
    --pf-c-dropdown__toggle-image--MarginRight: 0;
  }
}

.pf-c-dropdown__menu {
  position: absolute;
  top: var(--pf-c-dropdown__menu--Top);
  z-index: var(--pf-c-dropdown__menu--ZIndex);
  padding-top: var(--pf-c-dropdown__menu--PaddingTop);
  padding-bottom: var(--pf-c-dropdown__menu--PaddingBottom);
  background: var(--pf-c-dropdown__menu--BackgroundColor);
  background-clip: padding-box;
  box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
}

.pf-c-dropdown .pf-c-menu,
.pf-c-dropdown__menu {
  min-width: 100%;

  @each $breakpoint, $breakpoint-value in $pf-c-dropdown--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @include pf-apply-breakpoint($breakpoint) {
      &.pf-m-align-right#{$breakpoint-name} {
        right: 0;
      }

      // unset alignment set for .pf-m-align-right
      &.pf-m-align-left#{$breakpoint-name} {
        right: auto;
      }
    }
  }
}

.pf-c-dropdown.pf-m-top {
  .pf-c-dropdown__menu {
    --pf-c-dropdown__menu--Top: var(--pf-c-dropdown--m-top__menu--Top);

    transform: translateY(var(--pf-c-dropdown--m-top__menu--TranslateY));
  }

  > .pf-c-menu {
    --pf-c-dropdown--c-menu--Top: var(--pf-c-dropdown--m-top--c-menu--Top);

    transform: translateY(var(--pf-c-dropdown--m-top--c-menu--TranslateY));
  }
}

.pf-c-dropdown__menu-item {
  display: block;
  width: 100%;
  padding: var(--pf-c-dropdown__menu-item--PaddingTop) var(--pf-c-dropdown__menu-item--PaddingRight) var(--pf-c-dropdown__menu-item--PaddingBottom) var(--pf-c-dropdown__menu-item--PaddingLeft);
  font-size: var(--pf-c-dropdown__menu-item--FontSize);
  font-weight: var(--pf-c-dropdown__menu-item--FontWeight);
  line-height: var(--pf-c-dropdown__menu-item--LineHeight);
  color: var(--pf-c-dropdown__menu-item--Color);
  text-align: left;
  white-space: nowrap;
  background-color: var(--pf-c-dropdown__menu-item--BackgroundColor);
  border: none;

  &:hover,
  &:focus {
    --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--hover--Color);
    --pf-c-dropdown__menu-item--BackgroundColor: var(--pf-c-dropdown__menu-item--hover--BackgroundColor);

    text-decoration: none;
  }

  &:disabled,
  &.pf-m-disabled,
  &.pf-m-aria-disabled {
    --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--disabled--Color);
    --pf-c-dropdown__menu-item--BackgroundColor: var(--pf-c-dropdown__menu-item--disabled--BackgroundColor);
  }

  &:disabled,
  &.pf-m-disabled {
    pointer-events: none;
  }

  &.pf-m-aria-disabled {
    cursor: default;
  }

  &.pf-m-icon {
    display: flex;
    align-items: center;

    &.pf-m-description {
      flex-direction: column;
      align-items: start;
    }

    .pf-c-dropdown__menu-item-main {
      display: flex;
      align-items: center;
    }
  }

  &.pf-m-text {
    --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--m-text--Color);

    &:hover,
    &:focus {
      --pf-c-dropdown__menu-item--BackgroundColor: transparent;
    }
  }
}

.pf-c-dropdown__menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pf-c-dropdown__menu-item-icon--Width);
  height: var(--pf-c-dropdown__menu-item-icon--Height);
  margin-right: var(--pf-c-dropdown__menu-item-icon--MarginRight);

  > * {
    max-width: 100%;
    max-height: 100%;
  }
}

.pf-c-dropdown__menu-item-description {
  font-size: var(--pf-c-dropdown__menu-item-description--FontSize);
  color: var(--pf-c-dropdown__menu-item-description--Color);
}

.pf-c-dropdown__group + .pf-c-dropdown__group {
  padding-top: var(--pf-c-dropdown__group--group--PaddingTop);
}

.pf-c-dropdown__group-title {
  padding-top: var(--pf-c-dropdown__group-title--PaddingTop);
  padding-right: var(--pf-c-dropdown__group-title--PaddingRight);
  padding-bottom: var(--pf-c-dropdown__group-title--PaddingBottom);
  padding-left: var(--pf-c-dropdown__group-title--PaddingLeft);
  font-size: var(--pf-c-dropdown__group-title--FontSize);
  font-weight: var(--pf-c-dropdown__group-title--FontWeight);
  color: var(--pf-c-dropdown__group-title--Color);
}