.pf-c-context-selector {
  // Context selector
  --pf-c-context-selector--Width: #{pf-size-prem(250px)};

  // Toggle
  --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--form-element);
  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
  --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
  --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
  --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
  --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
  --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
  --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--sm);

  // Toggle text
  --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
  --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);

  // Toggle icon arrow
  --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);

  // Menu
  --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
  --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--sm);
  --pf-c-context-selector__menu--PaddingTop: var(--pf-global--spacer--sm); // remove at breaking change
  --pf-c-context-selector__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
  --pf-c-context-selector__menu--BoxShadow: var(--pf-global--BoxShadow--md);

  // Menu input
  --pf-c-context-selector__menu-search--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-context-selector__menu-search--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector__menu-search--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector__menu-search--BorderBottomColor: var(--pf-global--BorderColor--100);
  --pf-c-context-selector__menu-search--BorderBottomWidth: var(--pf-global--BorderWidth--sm);

  // Menu footer
  --pf-c-context-selector__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
  --pf-c-context-selector__menu-footer--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector__menu-footer--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-global--spacer--md);

  // Menu list
  --pf-c-context-selector__menu-list--MaxHeight: #{pf-size-prem(200px)};
  --pf-c-context-selector__menu-list--PaddingTop: var(--pf-c-context-selector__menu--PaddingTop); // reference spacer directly at breaking change
  --pf-c-context-selector__menu-list--PaddingBottom: var(--pf-global--spacer--sm);


  // Menu item
  --pf-c-context-selector__menu-list-item--Color: var(--pf-global--Color--dark-100);
  --pf-c-context-selector__menu-list-item--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
  --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);

  // Menu item icon
  --pf-c-context-selector__menu-item-icon--Color: var(--pf-global--active-color--100);
  --pf-c-context-selector__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
  --pf-c-context-selector__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);

  // Full height
  --pf-c-context-selector--m-full-height__toggle--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-full-height__toggle--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-full-height__toggle--before--BorderTopWidth: 0;
  --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);

  // Large
  --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
  --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);

  // Page insets
  --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);

  @media screen and (min-width: $pf-global--breakpoint--xl) {
    --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
    --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
    --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
    --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
    --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
    --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
    --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
    --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
    --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
    --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
    --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
    --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
  }

  position: relative;
  display: inline-block;
  width: var(--pf-c-context-selector--Width);
  max-width: 100%;

  &.pf-m-full-height {
    --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
    --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
    --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-full-height__toggle--PaddingRight);
    --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-full-height__toggle--PaddingLeft);

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

    .pf-c-context-selector__toggle {
      align-self: stretch;

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

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

  &.pf-m-large {
    --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
    --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
    --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
    --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
    --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
  }

  &.pf-m-page-insets {
    --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
    --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
    --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
    --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
    --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
    --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
    --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
    --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
    --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
    --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
    --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
    --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
  }
}

.pf-c-context-selector__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
  color: var(--pf-c-context-selector__toggle--Color);
  white-space: nowrap;
  cursor: pointer;
  border: none;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border: var(--pf-c-context-selector__toggle--BorderWidth) solid;
    border-color: var(--pf-c-context-selector__toggle--BorderTopColor) var(--pf-c-context-selector__toggle--BorderRightColor) var(--pf-c-context-selector__toggle--BorderBottomColor) var(--pf-c-context-selector__toggle--BorderLeftColor);
  }

  &:hover {
    &::before {
      --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);

      border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
    }
  }

  &:active,
  &.pf-m-active,
  &:focus-within {
    &::before {
      --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--active--BorderBottomColor);

      border-bottom-width: var(--pf-c-context-selector__toggle--active--BorderBottomWidth);
    }
  }

  .pf-m-expanded > & {
    &::before {
      --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--expanded--BorderBottomColor);

      border-bottom-width: var(--pf-c-context-selector__toggle--expanded--BorderBottomWidth);
    }
  }

  &.pf-m-plain {
    --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--PaddingRight);
    --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--PaddingLeft);
    --pf-c-context-selector__toggle-icon--Color: var(--pf-c-context-selector--m-plain__toggle-icon--Color);

    &.pf-m-text {
      --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingRight);
      --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft);
    }

    &:not(.pf-m-text) {
      display: inline-block;
      width: auto;
      color: var(--pf-c-context-selector__toggle--m-plain--Color);
    }

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

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

    &::before {
      border: 0;
    }
  }

  .pf-c-context-selector__toggle-text {
    @include pf-text-overflow;

    font-size: var(--pf-c-context-selector__toggle-text--FontSize);
    font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
    line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
  }
}

.pf-c-context-selector__toggle-icon {
  margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
  margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
}

.pf-c-context-selector__menu {
  @include pf-t-light;

  position: absolute;
  top: var(--pf-c-context-selector__menu--Top);
  z-index: var(--pf-c-context-selector__menu--ZIndex);
  min-width: 100%;
  background-color: var(--pf-c-context-selector__menu--BackgroundColor);
  background-clip: padding-box;
  box-shadow: var(--pf-c-context-selector__menu--BoxShadow);
}

.pf-c-context-selector__menu-search {
  position: relative;
  padding: var(--pf-c-context-selector__menu-search--PaddingTop) var(--pf-c-context-selector__menu-search--PaddingRight) var(--pf-c-context-selector__menu-search--PaddingBottom) var(--pf-c-context-selector__menu-search--PaddingLeft);
  border-bottom: var(--pf-c-context-selector__menu-search--BorderBottomWidth) solid var(--pf-c-context-selector__menu-search--BorderBottomColor);
}

.pf-c-context-selector__menu-footer {
  padding: var(--pf-c-context-selector__menu-footer--PaddingTop) var(--pf-c-context-selector__menu-footer--PaddingRight) var(--pf-c-context-selector__menu-footer--PaddingBottom) var(--pf-c-context-selector__menu-footer--PaddingLeft);
  box-shadow: var(--pf-c-context-selector__menu-footer--BoxShadow);
}

.pf-c-context-selector__menu-list {
  max-height: var(--pf-c-context-selector__menu-list--MaxHeight);
  padding-top: var(--pf-c-context-selector__menu-list--PaddingTop);
  padding-bottom: var(--pf-c-context-selector__menu-list--PaddingBottom);
  overflow-y: auto;
}

.pf-c-context-selector__menu-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
  color: var(--pf-c-context-selector__menu-list-item--Color);
  white-space: nowrap;
  border: none;


  &:hover,
  &:focus {
    text-decoration: none;
    background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
  }

  &.pf-m-disabled,
  &:disabled {
    --pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);

    pointer-events: none;
  }
}