@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Dropdown/dropdown.scss

@@ -1,820 +0,0 @@
-// @debug $dropdown; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-
-.#{$dropdown} {
-  // Toggle
-  --#{$dropdown}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$dropdown}__toggle--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$dropdown}__toggle--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--ColumnGap: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--MinWidth: 0;
-  --#{$dropdown}__toggle--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$dropdown}__toggle--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$dropdown}__toggle--Color: var(--#{$pf-global}--Color--100);
-  --#{$dropdown}__toggle--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$dropdown}__toggle--BackgroundColor: transparent;
-  --#{$dropdown}__toggle--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$dropdown}__toggle--before--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$dropdown}__toggle--before--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$dropdown}__toggle--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$dropdown}__toggle--hover--before--BorderBottomColor: var(--#{$pf-global}--active-color--100);
-  --#{$dropdown}__toggle--focus--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--focus--before--BorderBottomColor: var(--#{$pf-global}--active-color--100);
-  --#{$dropdown}__toggle--active--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--active--before--BorderBottomColor: var(--#{$pf-global}--active-color--100);
-  --#{$dropdown}--m-expanded__toggle--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}--m-expanded__toggle--before--BorderBottomColor: var(--#{$pf-global}--active-color--100);
-  --#{$dropdown}__toggle--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
-
-  // Plain
-  --#{$dropdown}__toggle--m-plain--Color: var(--#{$pf-global}--Color--200);
-  --#{$dropdown}__toggle--m-plain--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$dropdown}__toggle--m-plain--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$dropdown}__toggle--m-plain--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$dropdown}__toggle--m-plain--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$dropdown}__toggle--m-plain--child--LineHeight: normal; // remove at breaking change
-
-  // Primary
-  --#{$dropdown}__toggle--m-primary--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$dropdown}__toggle--m-primary--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$dropdown}__toggle--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-primary--hover--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}__toggle--m-primary--focus--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}__toggle--m-primary--active--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}--m-expanded__toggle--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}__toggle--m-primary--disabled--Color: var(--#{$pf-global}--Color--100);
-
-  // Secondary
-  --#{$dropdown}__toggle--m-secondary--Color: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-secondary--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$dropdown}__toggle--m-secondary--BackgroundColor: transparent;
-  --#{$dropdown}__toggle--m-secondary--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$dropdown}__toggle--m-secondary--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--focus--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--active--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-secondary--hover--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-secondary--focus--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-secondary--active--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}--m-expanded__toggle--m-secondary--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}--m-expanded__toggle--m-secondary--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-
-  // toggle button
-  --#{$dropdown}__toggle-button--Color: var(--#{$pf-global}--Color--100);
-  --#{$dropdown}__toggle-button--BackgroundColor: transparent;
-
-  // toggle progress
-  --#{$dropdown}__toggle-progress--Visibility: hidden;
-  --#{$dropdown}__toggle-progress--c-spinner--diameter: var(--#{$pf-global}--FontSize--sm); // should match the checkbox input size
-
-  // split buttons
-  --#{$dropdown}__toggle--m-split-button--child--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$dropdown}__toggle--m-split-button--child--PaddingRight: var(--#{$pf-global}--spacer--xs);
-  --#{$dropdown}__toggle--m-split-button--child--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$dropdown}__toggle--m-split-button--child--PaddingLeft: var(--#{$pf-global}--spacer--xs);
-  --#{$dropdown}__toggle--m-split-button--child--BackgroundColor: transparent;
-  --#{$dropdown}__toggle--m-split-button--first-child--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--m-split-button--last-child--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--m-split-button--m-action--child--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--m-split-button--m-action--child--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--#{$pf-global}--BorderWidth--sm));
-  --#{$dropdown}__toggle--m-split-button__toggle-text--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle--m-split-button--child--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
-
-  // Split button
-  --#{$dropdown}__toggle--m-split-button--m-primary--child--BorderRadius: var(--#{$dropdown}__toggle--m-split-button--child--BorderRadius);
-  --#{$dropdown}__toggle--m-split-button--m-primary--child--BackgroundColor: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-
-  // Split button, action, primary
-  --#{$dropdown}__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--#{$pf-global}--primary-color--200);
-  --#{$dropdown}__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
-
-  // Split button
-  --#{$dropdown}--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--Color: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--#{$pf-global}--primary-color--100);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-
-  // Toggle Arrow
-  --#{$dropdown}__toggle-icon--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$dropdown}__toggle-icon--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle-icon--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__toggle-icon--MarginLeft: 0;
-  --#{$dropdown}--m-top--m-expanded__toggle-icon--Rotate: 180deg;
-  --#{$dropdown}--m-plain__toggle-icon--Color: var(--#{$pf-global}--Color--200);
-  --#{$dropdown}--m-plain--hover__toggle-icon--Color: var(--#{$pf-global}--Color--100);
-
-  // Menu
-  --#{$dropdown}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$dropdown}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$dropdown}__menu--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__menu--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$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
-  --#{$dropdown}__menu--ZIndex: var(--#{$pf-global}--ZIndex--sm);
-  --#{$dropdown}--m-top__menu--Top: 0;
-  --#{$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
-  --#{$dropdown}__menu-item--BackgroundColor: transparent;
-  --#{$dropdown}__menu-item--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__menu-item--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$dropdown}__menu-item--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__menu-item--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$dropdown}__menu-item--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$dropdown}__menu-item--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$dropdown}__menu-item--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$dropdown}__menu-item--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$dropdown}__menu-item--hover--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$dropdown}__menu-item--disabled--Color: var(--#{$pf-global}--Color--dark-200);
-  --#{$dropdown}__menu-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$dropdown}__menu-item--disabled--BackgroundColor: transparent;
-  --#{$dropdown}__menu-item--m-text--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Menu item icon
-  --#{$dropdown}__menu-item-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__menu-item-icon--Width: var(--#{$pf-global}--icon--FontSize--lg);
-  --#{$dropdown}__menu-item-icon--Height: var(--#{$pf-global}--icon--FontSize--lg);
-
-  // Menu item description
-  --#{$dropdown}__menu-item-description--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$dropdown}__menu-item-description--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Groups
-  --#{$dropdown}__group--group--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__group-title--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}__group-title--PaddingRight: var(--#{$dropdown}__menu-item--PaddingRight);
-  --#{$dropdown}__group-title--PaddingBottom: var(--#{$dropdown}__menu-item--PaddingBottom);
-  --#{$dropdown}__group-title--PaddingLeft: var(--#{$dropdown}__menu-item--PaddingLeft);
-  --#{$dropdown}__group-title--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$dropdown}__group-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$dropdown}__group-title--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Divider
-  --#{$dropdown}--c-divider--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$dropdown}--c-divider--MarginBottom: var(--#{$pf-global}--spacer--sm);
-
-  // badge toggle icon
-  --#{$dropdown}__toggle--c-badge__toggle-icon--PaddingRight: 0;
-  --#{$dropdown}__toggle--c-badge__toggle-icon--PaddingLeft: 0;
-  --#{$dropdown}__toggle--c-badge__toggle-icon--MarginLeft: var(--#{$pf-global}--spacer--xs);
-  --#{$dropdown}__toggle--c-badge__toggle-icon--MarginRight: 0;
-
-  // menu
-  --#{$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
-  --#{$dropdown}--c-menu--ZIndex: var(--#{$pf-global}--ZIndex--sm);
-  --#{$dropdown}--m-top--c-menu--Top: 0;
-  --#{$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
-  --#{$dropdown}--m-full-height__toggle--before--BorderTopWidth: 0;
-  --#{$dropdown}--m-full-height__toggle--expanded--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
-  --#{$dropdown}--m-full-height__toggle--hover--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
-  --#{$dropdown}--m-full-height__toggle--active--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
-  --#{$dropdown}--m-full-height__toggle--focus--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
-  --#{$dropdown}--m-full-height__toggle--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$dropdown}--m-full-height__toggle--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-
-  position: relative;
-  display: inline-flex;
-  align-items: flex-start;
-  max-width: 100%;
-
-  .#{$divider} {
-    margin-block-start: var(--#{$dropdown}--c-divider--MarginTop);
-    margin-block-end: var(--#{$dropdown}--c-divider--MarginBottom);
-
-    // Support divider as last item in group to separate groups
-    &:last-child {
-      --#{$dropdown}--c-divider--MarginBottom: 0;
-    }
-  }
-
-  > .#{$menu} {
-    position: absolute;
-   inset-block-start: var(--#{$dropdown}--c-menu--Top);
-    z-index: var(--#{$dropdown}--c-menu--ZIndex);
-  }
-
-  &.pf-m-full-height {
-    --#{$dropdown}__toggle--PaddingRight: var(--#{$dropdown}--m-full-height__toggle--PaddingRight);
-    --#{$dropdown}__toggle--PaddingLeft: var(--#{$dropdown}--m-full-height__toggle--PaddingLeft);
-    --#{$dropdown}__toggle--active--before--BorderBottomWidth: var(--#{$dropdown}--m-full-height__toggle--active--before--BorderBottomWidth);
-    --#{$dropdown}__toggle--focus--before--BorderBottomWidth: var(--#{$dropdown}--m-full-height__toggle--focus--before--BorderBottomWidth);
-    --#{$dropdown}--m-expanded__toggle--before--BorderBottomWidth: var(--#{$dropdown}--m-full-height__toggle--expanded--before--BorderBottomWidth);
-
-    display: inline-flex;
-    align-items: center;
-    height: 100%;
-
-    .#{$dropdown}__toggle {
-      align-self: stretch;
-
-      &::before {
-        border-block-start-width: var(--#{$dropdown}--m-full-height__toggle--before--BorderTopWidth);
-      }
-    }
-
-    &:hover {
-      .#{$dropdown}__toggle::before {
-        border-block-end-width: var(--#{$dropdown}--m-full-height__toggle--hover--before--BorderBottomWidth);
-      }
-    }
-  }
-
-  &.pf-m-expanded {
-    --#{$dropdown}__toggle--m-split-button--m-primary--child--BackgroundColor: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor); // update to --#{$dropdown}__toggle--m-primary--m-split-button--child--before--BorderWidth at breaking change
-    --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--#{$dropdown}--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
-  }
-}
-
-.#{$dropdown}__toggle {
-  position: relative;
-  display: inline-flex;
-  column-gap: var(--#{$dropdown}__toggle--ColumnGap);
-  align-items: center;
-  min-width: var(--#{$dropdown}__toggle--MinWidth);
-  max-width: 100%;
-  padding-block-start: var(--#{$dropdown}__toggle--PaddingTop);
-  padding-block-end: var(--#{$dropdown}__toggle--PaddingBottom);
-  padding-inline-start: var(--#{$dropdown}__toggle--PaddingLeft);
-  padding-inline-end: var(--#{$dropdown}__toggle--PaddingRight);
-  font-size: var(--#{$dropdown}__toggle--FontSize);
-  font-weight: var(--#{$dropdown}__toggle--FontWeight);
-  line-height: var(--#{$dropdown}__toggle--LineHeight);
-  color: var(--#{$dropdown}__toggle--Color);
-  background-color: var(--#{$dropdown}__toggle--BackgroundColor);
-  border: none;
-
-  &::before,
-  &.pf-m-action .#{$dropdown}__toggle-button::before {
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    content: "";
-    border: var(--#{$dropdown}__toggle--before--BorderWidth) solid;
-    border-block-start-color: var(--#{$dropdown}__toggle--before--BorderTopColor);
-    border-block-end-color: var(--#{$dropdown}__toggle--before--BorderBottomColor);
-    border-inline-start-color: var(--#{$dropdown}__toggle--before--BorderLeftColor);
-    border-inline-end-color: var(--#{$dropdown}__toggle--before--BorderRightColor);
-  }
-
-  &.pf-m-disabled,
-  &:disabled {
-    --#{$dropdown}__toggle--m-primary--Color: var(--#{$dropdown}__toggle--m-primary--disabled--Color);
-    --#{$dropdown}__toggle--before--BorderBottomColor: transparent;
-
-    pointer-events: none;
-
-    &:not(.pf-m-plain),
-    &.pf-m-plain.pf-m-text {
-      --#{$dropdown}__toggle--BackgroundColor: var(--#{$dropdown}__toggle--disabled--BackgroundColor);
-
-      &::before {
-        border: 0;
-      }
-    }
-  }
-
-  &.pf-m-split-button {
-    --#{$dropdown}__toggle--ColumnGap: 0;
-
-    padding: 0;
-
-    &:not(.pf-m-disabled) {
-      background-color: var(--#{$dropdown}__toggle--m-split-button--child--BackgroundColor);
-    }
-
-    > * {
-      position: relative;
-      padding-block-start: var(--#{$dropdown}__toggle--m-split-button--child--PaddingTop);
-      padding-block-end: var(--#{$dropdown}__toggle--m-split-button--child--PaddingBottom);
-      padding-inline-start: var(--#{$dropdown}__toggle--m-split-button--child--PaddingLeft);
-      padding-inline-end: var(--#{$dropdown}__toggle--m-split-button--child--PaddingRight);
-
-      &:first-child {
-        --#{$dropdown}__toggle--m-split-button--child--PaddingLeft: var(--#{$dropdown}__toggle--m-split-button--first-child--PaddingLeft);
-      }
-
-      &:last-child {
-        --#{$dropdown}__toggle--m-split-button--child--PaddingRight: var(--#{$dropdown}__toggle--m-split-button--last-child--PaddingRight);
-      }
-    }
-
-    &.pf-m-action {
-      --#{$dropdown}__toggle--m-split-button--child--PaddingRight: var(--#{$dropdown}__toggle--m-split-button--m-action--child--PaddingRight);
-      --#{$dropdown}__toggle--m-split-button--child--PaddingLeft: var(--#{$dropdown}__toggle--m-split-button--m-action--child--PaddingLeft);
-
-      .#{$dropdown}__toggle-button {
-        margin-inline-end: var(--#{$dropdown}__toggle--m-split-button--m-action__toggle-button--MarginRight);
-
-        // stylelint-disable max-nesting-depth
-        &::before {
-          border-inline-start: 0;
-        }
-
-        &:last-child {
-          --#{$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-inline-start: var(--#{$dropdown}__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--#{$dropdown}__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
-        }
-
-        &.pf-m-disabled,
-        &[disabled] {
-          --#{$dropdown}__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
-        }
-        // stylelint-enable
-      }
-    }
-
-    .#{$dropdown}__toggle-check {
-      display: flex;
-      align-items: center;
-      overflow: hidden;
-      cursor: pointer;
-
-      &.pf-m-in-progress {
-        --#{$dropdown}__toggle--m-split-button__toggle-check__input--Visibility: hidden;
-        --#{$dropdown}__toggle-progress--Visibility: visible;
-      }
-
-      > input,
-      .#{$check} {
-        --#{$check}__input--TranslateY: none;
-
-        align-self: revert;
-        width: auto;
-        cursor: pointer;
-        visibility: var(--#{$dropdown}__toggle--m-split-button__toggle-check__input--Visibility, unset);
-      }
-    }
-
-    .#{$dropdown}__toggle-button {
-      color: var(--#{$dropdown}__toggle-button--Color);
-      background-color: var(--#{$dropdown}__toggle-button--BackgroundColor);
-      border: 0;
-    }
-
-    .#{$dropdown}__toggle-text {
-      margin-inline-start: var(--#{$dropdown}__toggle--m-split-button__toggle-text--MarginLeft);
-    }
-  }
-
-  &.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
-    --#{$dropdown}__toggle--before--BorderWidth: 0;
-    --#{$dropdown}--m-expanded__toggle--before--BorderBottomWidth: 0;
-
-    > * {
-      background-color: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--BackgroundColor);
-      border: 0;
-
-      &:hover {
-        --#{$dropdown}__toggle--m-split-button--m-primary--child--BackgroundColor: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
-      }
-
-      &:focus {
-        --#{$dropdown}__toggle--m-split-button--m-primary--child--BackgroundColor: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
-      }
-
-      &:active,
-      &.pf-m-active {
-        --#{$dropdown}__toggle--m-split-button--m-primary--child--BackgroundColor: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
-      }
-    }
-
-    > :first-child {
-      border-start-start-radius: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--BorderRadius);
-      border-end-start-radius: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--BorderRadius);
-    }
-
-    > :last-child {
-      border-start-end-radius: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--BorderRadius);
-      border-end-end-radius: var(--#{$dropdown}__toggle--m-split-button--m-primary--child--BorderRadius);
-    }
-  }
-
-  // stylelint-disable selector-not-notation
-  // update to single :not() in breaking change
-  &:not(.pf-m-action):not(.pf-m-secondary):hover,
-  &.pf-m-action .#{$dropdown}__toggle-button:hover {
-    &::before {
-      --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$dropdown}__toggle--hover--before--BorderBottomColor);
-    }
-  }
-
-  &:not(.pf-m-action):not(.pf-m-secondary):focus,
-  &.pf-m-action .#{$dropdown}__toggle-button:focus {
-    &::before {
-      --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$dropdown}__toggle--focus--before--BorderBottomColor);
-
-      border-block-end-width: var(--#{$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 .#{$dropdown}__toggle-button:active {
-    &::before {
-      --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$dropdown}__toggle--active--before--BorderBottomColor);
-
-      border-block-end-width: var(--#{$dropdown}__toggle--active--before--BorderBottomWidth);
-    }
-  }
-
-  .pf-m-expanded > &:not(.pf-m-action):not(.pf-m-secondary),
-  .pf-m-expanded > &.pf-m-action .#{$dropdown}__toggle-button {
-    &::before {
-      --#{$dropdown}__toggle--before--BorderBottomColor: var(--#{$dropdown}--m-expanded__toggle--before--BorderBottomColor);
-
-      border-block-end-width: var(--#{$dropdown}--m-expanded__toggle--before--BorderBottomWidth);
-    }
-  }
-
-  &.pf-m-plain {
-    --#{$dropdown}__toggle-icon--Color: var(--#{$dropdown}--m-plain__toggle-icon--Color);
-
-    &:not(.pf-m-text) {
-      --#{$dropdown}__toggle--PaddingRight: var(--#{$dropdown}__toggle--m-plain--PaddingRight);
-      --#{$dropdown}__toggle--PaddingLeft: var(--#{$dropdown}__toggle--m-plain--PaddingLeft);
-
-      display: inline-block;
-      color: var(--#{$dropdown}__toggle--m-plain--Color);
-
-      // remove at breaking change
-      > * {
-        line-height: var(--#{$dropdown}__toggle--m-plain--child--LineHeight);
-      }
-    }
-
-    &::before {
-      border: 0;
-    }
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.pf-m-active,
-    .pf-m-expanded > & {
-      --#{$dropdown}__toggle--m-plain--Color: var(--#{$dropdown}__toggle--m-plain--hover--Color);
-      --#{$dropdown}--m-plain__toggle-icon--Color: var(--#{$dropdown}--m-plain--hover__toggle-icon--Color);
-    }
-
-    &.pf-m-disabled,
-    &:disabled {
-      --#{$dropdown}__toggle--m-plain--Color: var(--#{$dropdown}__toggle--m-plain--disabled--Color);
-    }
-  }
-
-  &.pf-m-primary {
-    --#{$dropdown}__toggle--Color: var(--#{$dropdown}__toggle--m-primary--Color);
-    --#{$dropdown}__toggle--BackgroundColor: var(--#{$dropdown}__toggle--m-primary--BackgroundColor);
-    --#{$dropdown}__toggle-button--Color: var(--#{$dropdown}__toggle--m-primary--Color);
-
-    border-radius: var(--#{$dropdown}__toggle--m-primary--BorderRadius);
-
-    &::before,
-    .#{$dropdown}__toggle-button::before {
-      border: 0;
-    }
-
-    &:hover {
-      --#{$dropdown}__toggle--BackgroundColor: var(--#{$dropdown}__toggle--m-primary--hover--BackgroundColor);
-    }
-
-    &:focus {
-      --#{$dropdown}__toggle--BackgroundColor: var(--#{$dropdown}__toggle--m-primary--focus--BackgroundColor);
-    }
-
-    &:active,
-    &.pf-m-active {
-      --#{$dropdown}__toggle--BackgroundColor: var(--#{$dropdown}__toggle--m-primary--active--BackgroundColor);
-    }
-
-    .pf-m-expanded > & {
-      --#{$dropdown}__toggle--BackgroundColor: var(--#{$dropdown}--m-expanded__toggle--m-primary--BackgroundColor);
-    }
-  }
-
-  &.pf-m-secondary {
-    border-radius: var(--#{$dropdown}__toggle--m-secondary--BorderRadius);
-
-    &:not(.pf-m-disabled):not([disabled]) {
-      --#{$dropdown}__toggle--Color: var(--#{$dropdown}__toggle--m-secondary--Color);
-      --#{$dropdown}__toggle--BackgroundColor: var(--#{$dropdown}__toggle--m-secondary--BackgroundColor);
-
-      &::before {
-        border: var(--#{$dropdown}__toggle--m-secondary--before--BorderWidth) solid var(--#{$dropdown}__toggle--m-secondary--before--BorderColor);
-        border-radius: var(--#{$dropdown}__toggle--m-secondary--BorderRadius);
-      }
-    }
-
-    &:hover {
-      --#{$dropdown}__toggle--m-secondary--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--hover--before--BorderWidth);
-    }
-
-    &:focus {
-      --#{$dropdown}__toggle--m-secondary--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--focus--before--BorderWidth);
-    }
-
-    &:active,
-    &.pf-m-active {
-      --#{$dropdown}__toggle--m-secondary--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--active--before--BorderWidth);
-    }
-
-    .pf-m-expanded > & {
-      --#{$dropdown}__toggle--m-secondary--before--BorderWidth: var(--#{$dropdown}--m-expanded__toggle--m-secondary--before--BorderWidth);
-      --#{$dropdown}__toggle--m-secondary--before--BorderColor: var(--#{$dropdown}--m-expanded__toggle--m-secondary--before--BorderColor);
-    }
-  }
-
-  &.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
-    --#{$dropdown}__toggle-button--Color: var(--#{$dropdown}__toggle--m-secondary--m-split-button--Color);
-
-    &:hover {
-      --#{$dropdown}__toggle--m-secondary--hover--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
-    }
-
-    &:focus {
-      --#{$dropdown}__toggle--m-secondary--focus--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
-    }
-
-    &:active {
-      --#{$dropdown}__toggle--m-secondary--active--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--m-split-button--active--before--BorderWidth);
-    }
-
-    > * {
-      &::before {
-        border: var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderColor);
-      }
-
-      &:hover {
-        --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
-      }
-
-      &:focus {
-        --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
-      }
-
-      &:active {
-        --#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
-      }
-
-      &:first-child::before {
-        border-start-start-radius: var(--#{$dropdown}__toggle--m-split-button--child--BorderRadius);
-        border-end-start-radius: var(--#{$dropdown}__toggle--m-split-button--child--BorderRadius);
-      }
-
-      &:last-child::before {
-        border-start-end-radius: var(--#{$dropdown}__toggle--m-split-button--child--BorderRadius);
-        border-end-end-radius: var(--#{$dropdown}__toggle--m-split-button--child--BorderRadius);
-      }
-
-      &:not(:first-child)::before {
-        border-inline-start: var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--#{$dropdown}__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
-      }
-
-      &:not(:last-child)::before {
-        border-inline-end: 0;
-      }
-    }
-
-    &.pf-m-action {
-      &::before {
-        border: 0;
-      }
-    }
-  }
-
-  > .#{$badge} {
-    --#{$dropdown}__toggle-icon--PaddingRight: var(--#{$dropdown}__toggle--c-badge__toggle-icon--PaddingRight);
-    --#{$dropdown}__toggle-icon--PaddingLeft: var(--#{$dropdown}__toggle--c-badge__toggle-icon--PaddingLeft);
-    --#{$dropdown}__toggle-icon--MarginLeft: var(--#{$dropdown}__toggle--c-badge__toggle-icon--MarginLeft);
-  }
-
-  .#{$dropdown}__toggle-text {
-    @include pf-v5-text-overflow;
-  }
-}
-
-.#{$dropdown}__toggle-button {
-  align-self: baseline;
-}
-
-.#{$dropdown}__toggle-text {
-  flex: 1 1 auto;
-  text-align: start;
-}
-
-.#{$dropdown}__toggle-icon {
-  padding-inline-start: var(--#{$dropdown}__toggle-icon--PaddingLeft);
-  padding-inline-end: var(--#{$dropdown}__toggle-icon--PaddingRight);
-  margin-inline-start: var(--#{$dropdown}__toggle-icon--MarginLeft);
-  line-height: var(--#{$dropdown}__toggle-icon--LineHeight);
-  color: var(--#{$dropdown}__toggle-icon--Color, inherit);
-
-  // stylelint-disable-next-line
-  .#{$dropdown}.pf-m-top.pf-m-expanded & {
-    transform: rotate(var(--#{$dropdown}--m-top--m-expanded__toggle-icon--Rotate));
-  }
-}
-
-// Toggle image
-.#{$dropdown}__toggle-image {
-  display: inline-flex;
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-// Loading spinner
-.#{$dropdown}__toggle-progress {
-  position: absolute;
- inset-inline-start: var(--#{$dropdown}__toggle--m-split-button--child--PaddingLeft);
-  visibility: var(--#{$dropdown}__toggle-progress--Visibility);
-
-  .#{$spinner} {
-    --#{$spinner}--diameter: var(--#{$dropdown}__toggle-progress--c-spinner--diameter);
-  }
-}
-
-.#{$dropdown}__menu {
-  position: absolute;
- inset-block-start: var(--#{$dropdown}__menu--Top);
-  z-index: var(--#{$dropdown}__menu--ZIndex);
-  padding-block-start: var(--#{$dropdown}__menu--PaddingTop);
-  padding-block-end: var(--#{$dropdown}__menu--PaddingBottom);
-  background: var(--#{$dropdown}__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--#{$dropdown}__menu--BoxShadow);
-
-  &.pf-m-static {
-    --#{$dropdown}--m-top__menu--TranslateY: 0;
-
-    position: static;
-    inset-block-start: auto;
-    inset-block-end: auto;
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-    z-index: auto;
-    min-width: min-content;
-  }
-}
-
-.#{$dropdown} .#{$menu},
-.#{$dropdown}__menu {
-  min-width: 100%;
-
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-dropdown--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
-
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      &.pf-m-align-right#{$breakpoint-name} {
-       inset-inline-end: 0;
-      }
-
-      // unset alignment set for .pf-m-align-right
-      &.pf-m-align-left#{$breakpoint-name} {
-       inset-inline-end: auto;
-      }
-    }
-  }
-}
-
-.#{$dropdown}.pf-m-top {
-  .#{$dropdown}__menu {
-    --#{$dropdown}__menu--Top: var(--#{$dropdown}--m-top__menu--Top);
-
-    transform: translateY(var(--#{$dropdown}--m-top__menu--TranslateY));
-  }
-
-  > .#{$menu} {
-    --#{$dropdown}--c-menu--Top: var(--#{$dropdown}--m-top--c-menu--Top);
-
-    transform: translateY(var(--#{$dropdown}--m-top--c-menu--TranslateY));
-  }
-}
-
-.#{$dropdown}__menu-item {
-  display: block;
-  width: 100%;
-  padding-block-start: var(--#{$dropdown}__menu-item--PaddingTop);
-  padding-block-end: var(--#{$dropdown}__menu-item--PaddingBottom);
-  padding-inline-start: var(--#{$dropdown}__menu-item--PaddingLeft);
-  padding-inline-end: var(--#{$dropdown}__menu-item--PaddingRight);
-  font-size: var(--#{$dropdown}__menu-item--FontSize);
-  font-weight: var(--#{$dropdown}__menu-item--FontWeight);
-  line-height: var(--#{$dropdown}__menu-item--LineHeight);
-  color: var(--#{$dropdown}__menu-item--Color);
-  text-align: start;
-  white-space: nowrap;
-  background-color: var(--#{$dropdown}__menu-item--BackgroundColor);
-  border: none;
-
-  &:hover,
-  &:focus {
-    --#{$dropdown}__menu-item--Color: var(--#{$dropdown}__menu-item--hover--Color);
-    --#{$dropdown}__menu-item--BackgroundColor: var(--#{$dropdown}__menu-item--hover--BackgroundColor);
-
-    text-decoration: none;
-  }
-
-  &:disabled,
-  &.pf-m-disabled,
-  &.pf-m-aria-disabled {
-    --#{$dropdown}__menu-item--Color: var(--#{$dropdown}__menu-item--disabled--Color);
-    --#{$dropdown}__menu-item--BackgroundColor: var(--#{$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: flex-start;
-    }
-
-    .#{$dropdown}__menu-item-main {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  &.pf-m-text {
-    --#{$dropdown}__menu-item--Color: var(--#{$dropdown}__menu-item--m-text--Color);
-
-    &:hover,
-    &:focus {
-      --#{$dropdown}__menu-item--BackgroundColor: transparent;
-    }
-  }
-}
-
-.#{$dropdown}__menu-item-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--#{$dropdown}__menu-item-icon--Width);
-  height: var(--#{$dropdown}__menu-item-icon--Height);
-  margin-inline-end: var(--#{$dropdown}__menu-item-icon--MarginRight);
-
-  > * {
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-
-.#{$dropdown}__menu-item-description {
-  font-size: var(--#{$dropdown}__menu-item-description--FontSize);
-  color: var(--#{$dropdown}__menu-item-description--Color);
-}
-
-.#{$dropdown}__group + .#{$dropdown}__group {
-  padding-block-start: var(--#{$dropdown}__group--group--PaddingTop);
-}
-
-.#{$dropdown}__group-title {
-  padding-block-start: var(--#{$dropdown}__group-title--PaddingTop);
-  padding-block-end: var(--#{$dropdown}__group-title--PaddingBottom);
-  padding-inline-start: var(--#{$dropdown}__group-title--PaddingLeft);
-  padding-inline-end: var(--#{$dropdown}__group-title--PaddingRight);
-  font-size: var(--#{$dropdown}__group-title--FontSize);
-  font-weight: var(--#{$dropdown}__group-title--FontWeight);
-  color: var(--#{$dropdown}__group-title--Color);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/dropdown";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-dropdown;
-}