.mui-theme:root {
  // Alert
  --mui-alert--BoxShadow: none;
  --mui-alert-warning-text: #663c00;
  --mui-alert-warning-font-weight: 400;
  --mui-alert--PaddingBlockStart: 6px;
  --mui-alert--PaddingBlockEnd: 6px;
  --mui-alert--PaddingInlineStart: 16px;
  --mui-alert--PaddingInlineEnd: 16px;
  --mui-alert__icon--MarginInlineEnd: 12px;
  --mui-alert__icon--MarginBlockStart: 7px;
  --mui-alert__icon--MarginBlockStart: 7px;
  --mui-alert__icon--MarginBlockEnd: 7px;
  --mui-alert__icon--FontSize: 22px;

  // Button
  --mui-button-font-weight: 500;
  --mui-button--BorderWidth: 1px;
  --mui-button--hover--BorderWidth: 1px;
  --mui-button--PaddingBlockStart: 6px;
  --mui-button--PaddingBlockEnd: 6px;
  --mui-button--PaddingInlineStart: 16px;
  --mui-button--PaddingInlineEnd: 16px;
  --mui-button--LineHeight: 1.75;
  --mui-link-underlineColor: rgba(33, 150, 243, 0.4);

  // Drawer
  --mui-drawer-BorderLeft: var(--mui-palette-grey-300);

  // Menu item
  --mui-menu__item--PaddingBlockStart: 6px;
  --mui-menu__item--PaddingBlockEnd: 6px;
  --mui-menu__item--PaddingInlineStart: 16px;
  --mui-menu__item--PaddingInlineEnd: 16px;
  --mui-menu__item--FontSize: 1rem;

  // Menu toggle
  --mui-menu-toggle__toggle-icon--MinHeight: auto;
  --mui-menu-toggle__controls--MinWidth: 0;
  --mui-menu-toggle--expanded--BackgroundColor: none;
  --mui-menu-toggle--expanded--BorderColor: none;
  --mui-menu-toggle--LineHeight: 1.75;
  --mui-menu-toggle--PaddingBlockStart: 6px;
  --mui-menu-toggle--PaddingBlockEnd: 6px;
  --mui-menu-toggle--PaddingInlineStart: 16px;
  --mui-menu-toggle--PaddingInlineEnd: 16px;
  --mui-menu-toggle--ColumnGap: 0;
  --mui-menu-toggle--expanded--Color: black;
  --mui-menu-toggle--hover--BorderColor: none;
  --mui-menu-toggle--BorderColor: none;
  --mui-menu-toggle--PaddingInlineStart: 10px;
  --mui-menu-toggle--PaddingInlineEnd: 10px;

  // Radio
  --mui-radio--margin: 10px 0;
  --mui-radio-PaddingLeft: 30px;
  --mui-radio__label--Width: 20px;
  --mui-radio__label--Height: 20px;
  --mui-radio__input--Width: 10px;
  --mui-radio__input--Height: 10px;

  // Sidebar from https://github.com/kubeflow/kubeflow/blob/4275d99754ac91f6cf5654b03824a73825e9fe55/components/centraldashboard/public/components/main-page.css#L7C1-L13C51
  --kf-central-primary-background-color: #0a3b71;
  --kf-central-sidebar-default-color: #ffffff90;
  --kf-central-app-drawer-width: 240px;
  --kf-central-app-bar-height: 24px;

  // Table
  --mui-table__button--BackgroundColor: none;
  --mui-table__button--hover--BackgroundColor: none;
  --mui-table__button--Color: var(--pf-v6-c-table--cell--Color);
  --mui-table__button--PaddingBlockStart: 0;
  --mui-table__button--PaddingBlockEnd: 0;
  --mui-table__button--PaddingInlineStart: 0;
  --mui-table__button--PaddingInlineEnd: 0;
  --mui-table--cell--PaddingInlineStart: 16px;
  --mui-table--cell--PaddingInlineEnd: 16px;
  --mui-table--cell--PaddingBlockStart: 16px;
  --mui-table--cell--PaddingBlockEnd: 16px;
  --mui-table--cell--first-last-child--PaddingInline: 8px;
  --mui-table__thead--cell--FontSize: 14px;
  --mui-table__sort-indicator--MarginInlineStart: 4px;

  letter-spacing: 0.01071em;

  // Tabs
  --mui-tabs__link--hover--BackgroundColor: transparent;
  --mui-tabs__item--PaddingBlockStart: 0;
  --mui-tabs__item--PaddingBlockEnd: 0;
  --mui-tabs__item--PaddingInlineStart: 0;
  --mui-tabs__item--PaddingInlineEnd: 0;
  --mui-tabs__link--PaddingBlockStart: 12px;
  --mui-tabs__link--PaddingBlockEnd: 12px;
  --mui-tabs__link--PaddingInlineStart: 16px;
  --mui-tabs__link--PaddingInlineEnd: 16px;
  --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
  --mui-tabs__item--m-current__link--after--BorderWidth: 2px;
  --mui-tabs__link--FontSize: 0.875rem;

  --mui-text-transform: uppercase;

  --mui-spacing-4px: calc(0.5 * var(--mui-spacing));
  --mui-spacing-8px: var(--mui-spacing);
  --mui-spacing-16px: calc(2 * var(--mui-spacing));

  --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--sm);
  --pf-t--global--border--width--box--status--default: 1px;
  --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
  --pf-t--global--text--color--brand--default: var(--mui-palette-primary-main);

  --pf-t--global--color--nonstatus--blue--default: var(--mui-palette-primary-main);
  --pf-t--global--text--color--inverse: var(--mui-palette-common-white);

  --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
  --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
  --pf-t--global--font--family--300: Roboto, Courier, monospace;
}

.mui-theme .pf-v6-c-action-list__item .pf-v6-c-button {
  --pf-v6-c-button--PaddingInlineStart: none;
  --pf-v6-c-button--PaddingInlineEnd: none;
}

.mui-theme .pf-v6-c-alert {
  --pf-v6-c-alert--m-warning__title--Color: var(
    --pf-t--global--text--color--status--warning--default
  );
  --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
  --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
  --pf-v6-c-alert__icon--FontSize: var(--mui-alert__icon--FontSize);
  --pf-v6-c-alert--BoxShadow: var(--mui-alert--BoxShadow);
  --pf-v6-c-alert--PaddingBlockStart: var(--mui-alert--PaddingBlockStart);
  --pf-v6-c-alert--PaddingBlockEnd: var(--mui-alert--PaddingBlockEnd);
  --pf-v6-c-alert--PaddingInlineStart: var(--mui-alert--PaddingInlineStart);
  --pf-v6-c-alert--PaddingInlineEnd: var(--mui-alert--PaddingInlineEnd);
}

.mui-theme .pf-v6-c-alert__title {
  padding-block: var(--mui-spacing);
}

.mui-theme .pf-v6-c-alert__icon {
  --pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
}

.mui-theme .pf-v6-c-brand.kubeflow_brand {
  padding: var(--pf-t--global--spacer--md);
}

.mui-theme .pf-v6-c-button {
  --pf-v6-c-button--FontWeight: var(--mui-button-font-weight);
  --pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
  --pf-v6-c-button--PaddingBlockEnd: var(--mui-button--PaddingBlockEnd);
  --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
  --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
  --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
  letter-spacing: 0.02857em;
}

.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline {
  --pf-v6-c-button--hover--Color: var(--mui-palette-primary-main);
  text-decoration-color: var(--mui-link-underlineColor);

  &:hover {
    text-decoration-color: initial;
  }

  &.workspace-kind-summary-button {
    text-transform: none;
  }
}

.mui-theme .pf-v6-c-button.pf-m-link.pf-m-inline .pf-v6-c-button__icon {
  // Keep icon color the same on hover
  color: inherit;
}

.mui-theme .pf-v6-c-button.pf-m-secondary:hover {
  --pf-v6-c-button--BorderWidth: var(--mui-button--hover--BorderWidth);
  --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
}

.mui-theme .pf-v6-c-card {
  --pf-v6-c-card--BorderWidth: 1px;
  --pf-v6-c-card--BorderRadius: var(--mui-shape-borderRadius);
  --pf-v6-c-card--BorderColor: var(--mui-palette-divider);
}

.pf-v6-c-card__selectable-actions
  :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
  --pf-v6-c-card--BorderColor: var(--mui-palette-grey-300);
}

.mui-theme .pf-v6-c-card:hover {
  --pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-100);
  --pf-v6-c-card--BorderColor: var(--mui-palette-grey-200);
}

.mui-theme .pf-v6-c-card.pf-m-selected {
  --pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-200);
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: none;
}

.mui-theme .pf-v6-c-card.pf-m-selected:hover {
  --pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-300);
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: none;
}

.mui-theme .pf-v6-c-description-list__term {
  font: var(--mui-font-subtitle2);
}

.mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
  align-content: center;
}

.mui-theme .pf-v6-c-drawer {
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
    --mui-drawer-BorderLeft
  );
}

.mui-theme .pf-v6-c-form__group {
  position: relative;
}

.mui-theme .pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
.mui-theme .pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
  padding-block-start: 10px;
}

.mui-theme .pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
  color: var(--mui-palette-text-disabled);
}

.mui-theme .pf-v6-c-form__helper-text.path-helper-text {
  margin-inline-start: var(--pf-t--global--spacer--lg);
}

.mui-theme .pf-v6-c-form__section-title {
  --pf-v6-c-form__section-title--MarginBlockStart: 0px;
  --pf-v6-c-form__section-title--MarginInlineStart: 0px;
  --pf-v6-c-form__section-title--MarginBlockEnd: 0.35em;
  --pf-v6-c-form__section-title--MarginInlineEnd: 0px;
}

// Base form label styles
.mui-theme .pf-v6-c-form__label {
  color: var(--mui-palette-grey-600);
  pointer-events: none;
  transition: all 0.2s ease;
  --pf-v6-c-form__label-required--Color: currentColor;
}

// Text input labels (text fields, textareas, selects)
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-form-control) .pf-v6-c-form__label,
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-text-input-group) .pf-v6-c-form__label {
  position: absolute;
  top: 35%;
  left: 12px;
  font-size: 14px;
  transform-origin: left center;
  transform: translateY(-50%) scale(0.75);
  background-color: var(--mui-palette-common-white);
  padding: 0 4px;
  z-index: 1;
}

// Form controls with number inputs - specific styling overrides
.mui-theme .pf-v6-c-form__group:has(.pf-v6-c-number-input) {
  .pf-v6-c-form__label {
    top: 30%;
    font-size: 16px;
    left: 0;
  }

  .pf-v6-c-form-control {
    // Override default form control padding to match button padding in this context
    --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
    --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);

    &.workspace-kind-unit-select {
      --pf-v6-c-form-control--PaddingInlineEnd: calc(
        var(--pf-v6-c-form-control__select--PaddingInlineEnd) +
          var(--pf-v6-c-form-control__icon--FontSize)
      );
    }
  }
}

.mui-theme .pf-v6-c-form-control input::placeholder {
  --pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
}

.mui-theme .pf-v6-c-form-control {
  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
  --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
}

.mui-theme .pf-v6-c-form-control {
  // Resize is disabled in MUI.
  resize: none;
  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);

  #text-file-simple-filename {
    --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
    --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
  }
}

.mui-theme .pf-v6-c-form__section {
  --pf-v6-c-form__section--Gap: 0px;
}

.mui-theme .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
  padding: 8px 14px;
}

.mui-theme .tr-fieldset-wrapper .form-fieldset {
  inset: 0px;
}

.mui-theme .pf-v6-c-form-control {
  // Using CSS property here since PF vars for input padding do not exist.
  // PF can add custom vars for padding on text input, text area, and form select

  --pf-v6-c-form-control--PaddingBlockStart: 16.5px;
  --pf-v6-c-form-control--PaddingBlockEnd: 16.5px;
  --pf-v6-c-form-control--PaddingInlineStart: 14px;
  --pf-v6-c-form-control--PaddingInlineEnd: 14px;
}

.mui-theme .pf-v6-c-text-input-group {
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
}

.mui-theme .pf-v6-c-text-input-group {
  --pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
}

.mui-theme .pf-v6-c-form__group-control textarea {
  position: relative;
  box-sizing: border-box;
}

.mui-theme .pf-v6-c-form-control > :is(input, select, textarea):focus {
  --pf-v6-c-form-control--OutlineOffset: none;
  outline: none;
}

.mui-theme .workspacekind-form-resource-input,
.custom-resource-type-input {
  // Make sure input and select have the same height in ResourceInputWrapper
  .pf-v6-c-form-control {
    --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
    --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);

    &:has(select) {
      --pf-v6-c-form-control--PaddingInlineEnd: calc(
        var(--pf-v6-c-form-control__select--PaddingInlineEnd) +
          var(--pf-v6-c-form-control__icon--FontSize)
      );
    }
  }
}

.mui-theme .pf-v6-c-text-input-group__text-input:focus {
  --pf-v6-c-form-control--OutlineOffset: none;
  outline: none;
}

.form-fieldset-wrapper {
  position: relative;
  width: 100%;
}

.pf-v6-c-form__group .form-fieldset-legend {
  float: unset;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0;
  height: 11px;
  font-size: 0.75em;
  visibility: hidden;
  max-width: 0.01px;
  white-space: nowrap;
  max-width: 100%;
}

.form-fieldset-wrapper:hover .form-fieldset {
  border-color: black;
}

.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
  border-color: rgba(0, 0, 0, 0.23);
}

.form-fieldset-wrapper:focus-within .form-fieldset {
  border-color: var(--mui-palette-primary-main);
  border-width: 2px;
  padding: 7px 7px;
}

.form-fieldset-legend {
  float: unset;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0 5px 0 5px;
  font-size: 0.75em;
  max-width: 0.01px;
  white-space: nowrap;
  max-width: 100%;
}

.form-fieldset-wrapper:focus-within {
  color: var(--mui-palette-primary-main);
}

.form-fieldset-wrapper,
.toolbar-fieldset-wrapper,
.tr-fieldset-wrapper {
  position: relative;
  width: 100%;
}

.form-fieldset-wrapper .form-fieldset:hover {
  border-color: var(--mui-palette-common-black);
}

.toolbar-fieldset-wrapper:focus-within .form-fieldset,
.tr-fieldset-wrapper:focus-within .form-fieldset {
  border-color: var(--mui-palette-primary-main);
  border-width: 2px;
  padding: 7px 7px;
}

.toolbar-fieldset-wrapper .form-fieldset,
.form-fieldset {
  text-align: left;
  position: absolute;
  inset: -5px 0px 0px;
  margin: 0;
  padding: 0 8px;
  pointer-events: none;
  border-radius: inherit;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  min-width: 0%;
  border-color: rgba(0, 0, 0, 0.23);
  border-radius: var(--mui-shape-borderRadius);
}

.toolbar-fieldset-wrapper .form-fieldset-legend {
  float: unset;
  width: auto;
  overflow: hidden;
  display: block;
  padding: 0 5px 0 5px;
  font-size: 0.75em;
  max-width: 0.01px;
  white-space: nowrap;
  max-width: 100%;
}

.toolbar-fieldset-wrapper .form-fieldset-legend span {
  font-weight: var(--pf-t--global--font--weight--200);
}

.toolbar-fieldset-wrapper:focus-within {
  color: var(--mui-palette-primary-main);
}

.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
  color: var(--mui-palette-primary-main);
}

.tr-fieldset-wrapper .pf-v6-c-form-control,
.toolbar-fieldset-wrapper .pf-v6-c-form-control,
.form-fieldset-wrapper .pf-v6-c-form-control {
  --pf-v6-c-form-control--before--BorderColor: transparent !important;
  --pf-v6-c-form-control--after--BorderColor: transparent !important;
}

.pf-v6-c-form__field-group-body {
  --pf-v6-c-form__field-group-body--PaddingBlockStart: 8px;
}

.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
  color: var(--mui-palette-primary-main);
}

.pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
  --pf-v6-c-form-control--after--BorderWidth: 2px;
  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
}

.pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.

  /* Change color of the label when the input is focused */
  color: var(--mui-palette-primary-main);
}

.mui-theme .pf-v6-c-menu {
  --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
  --pf-v6-c-menu--BorderRadius: var(--mui-shape-borderRadius);
  --pf-v6-c-menu--PaddingBlockStart: none;
  --pf-v6-c-menu--PaddingBlockEnd: none;
  --pf-v6-c-menu--PaddingInlineStart: var(--mui-spacing);
  --pf-v6-c-menu--PaddingInlineEnd: var(--mui-spacing);
  --pf-v6-c-menu__item--PaddingBlockStart: var(--mui-menu__item--PaddingBlockStart);
  --pf-v6-c-menu__item--PaddingBlockEnd: var(--mui-menu__item--PaddingBlockEnd);
  --pf-v6-c-menu__item--PaddingInlineStart: var(--mui-menu__item--PaddingInlineStart);
  --pf-v6-c-menu__item--PaddingInlineEnd: var(--mui-menu__item--PaddingInlineEnd);
  --pf-v6-c-menu__item--FontSize: var(--mui-menu__item--FontSize);
}

.mui-theme .pf-v6-c-menu-toggle {
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
  --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
    --mui-menu-toggle--expanded--BackgroundColor
  );
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
  --pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap);
  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
  --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
  --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
    --pf-t--global--background--color--action--plain--hover
  );
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
    --pf-t--global--color--brand--default
  );
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
    --mui-palette-primary-dark
  );

  font-weight: var(--mui-button-font-weight);
  letter-spacing: 0.02857em;
  height: 37px;

}

.mui-theme .pf-v6-c-menu-toggle__button {
  font-weight: var(--mui-button-font-weight);
  letter-spacing: 0.02857em;
  align-self: stretch;
}

.mui-theme .pf-v6-c-menu-toggle.pf-m-primary {
  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-white);
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--mui-palette-primary-dark);
}

.mui-theme .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
  --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
}

.mui-theme
  .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
    --mui-palette-primary-dark
  );
}

.pf-v6-c-menu-toggle.pf-m-secondary.pf-m-split-button {
  --pf-v6-c-menu-toggle--BorderColor: var(--mui-palette-primary-main);
  --pf-v6-c-menu-toggle--BorderWidth: var(--mui-button--BorderWidth);
  --pf-v6-c-menu-toggle--BorderStyle: solid;
  --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-primary-dark);
}

.mui-theme .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--mui-spacing-4);
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--mui-spacing-4);
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
}

.mui-theme .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
  vertical-align: revert;
}

.mui-theme .pf-v6-c-menu-toggle__toggle-icon {
  font-size: 20px;
}

.mui-theme .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
  margin-right: calc(var(--mui-spacing) * -1 + 4px);
  margin-left: var(--mui-spacing);
}

.mui-theme .pf-v6-c-menu-toggle__icon {
  display: block;
}

.mui-theme .pf-v6-c-nav {
  padding-block-start: 0;
}

.mui-theme .pf-v6-c-nav__link {
  --pf-v6-c-nav__link--BorderRadius: 0px;
  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
  --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
  --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
  --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);

  &.pf-m-current {
    border-left: 3px solid var(--mui-palette-common-white);
    --pf-v6-c-nav__link--m-current--BackgroundColor: #ffffff1b;
    --pf-v6-c-nav__link--m-current--Color: var(--mui-palette-common-white);
  }

  &.pf-v6-c-brand {
    --pf-v6-c-nav__link--hover--BackgroundColor: none;
  }
}

.mui-theme .pf-v6-c-nav__link:focus {
  --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
}

.mui-theme .pf-v6-c-nav__list {
  row-gap: none;
}

.mui-theme .pf-v6-c-page__sidebar {
  --pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
}

.mui-theme .pf-v6-c-page__sidebar-body {
  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
}

.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
  --pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-primary-main);
}

.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
  --pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-success-main);
}

.mui-theme .pf-v6-c-radio.pf-m-standalone:not(.workspace-kind-form-radio) .pf-v6-c-radio__input {
  display: none;
}

.mui-theme .pf-v6-c-table {
  --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary);
  --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary);
  --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary);
  --pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary);
  --pf-v6-c-table--cell--Color: var(--mui-palette-text-primary);
  --pf-v6-c-table__button--hover--BackgroundColor: var(--mui-table__button--BackgroundColor);
  --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color);
  --pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart);
  --pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd);
  --pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart);
  --pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd);
  --pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart);
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
  --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
    --mui-table--cell--first-last-child--PaddingInline
  );
  --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
  --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
  --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
    --mui-table__sort-indicator--MarginInlineStart
  );

  letter-spacing: 0.01071em;
}

.mui-theme .pf-v6-c-table .pf-m-align-right {
  text-align: right;
}

.mui-theme .pf-v6-c-table__sort-indicator {
  font-size: 18px;
  opacity: 0;
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transform-origin: center center;
  align-self: start;
}

/* CSS workaround for spacing in labels in Workspace Kind */
.form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
  padding-block-start: 0px;
}

/* CSS workaround to use MUI icon for sort icon */
.mui-theme .pf-v6-c-table__sort-indicator::before {
  display: block;
  width: 1em;
  height: 1em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='ArrowDownwardIcon'%3E%3Cpath d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'%3E%3C/path%3E%3C/svg%3E");
}

/* Hide PF's default icon for the CSS workaround to use MUI's icon */
.mui-theme .pf-v6-c-table__sort-indicator svg {
  display: none;
}

.mui-theme .pf-v6-c-table__button:is(:hover, :focus) .pf-v6-c-table__sort-indicator,
.mui-theme .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__sort-indicator {
  opacity: 0.6;
}

.mui-theme .pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
  transform: rotate(180deg);
  align-self: end;
}

.mui-theme .pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
  align-self: start;
}

.mui-theme .pf-v6-c-tab-content {
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
}

.pf-v6-c-tab-content__body.pf-m-padding {
  --pf-v6-c-tab-content__body--PaddingInlineStart: 0px;
  --pf-v6-c-tab-content__body--PaddingInlineEnd: 0px;
  --pf-v6-c-tab-content__body--PaddingBlockStart: var(--mui-spacing-8px);
  --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--mui-spacing-8px);
}

.mui-theme .pf-v6-c-tabs {
  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
  --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
  --pf-v6-c-tabs__item--PaddingBlockEnd: var(--mui-tabs__item--PaddingBlockEnd);
  --pf-v6-c-tabs__item--PaddingInlineStart: none;
  --pf-v6-c-tabs__item--PaddingInlineEnd: var(--mui-tabs__item--PaddingInlineEnd);
  --pf-v6-c-tabs__link--PaddingBlockStart: var(--mui-tabs__link--PaddingBlockStart);
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--mui-tabs__link--PaddingBlockEnd);
  --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
  --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
    --mui-tabs__item--m-current__link--after--BorderWidth
  );
  --pf-v6-c-tabs__link--FontSize: 0.875rem;
}

.mui-theme .pf-v6-c-tabs__link {
  font-weight: var(--mui-button-font-weight);
  line-height: var(--mui-button-line-height);
  letter-spacing: 0.02857em;
}

.mui-theme .pf-v6-c-tab-content {
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
}

.mui-theme .pf-v6-c-table__td.pf-v6-c-table__action.pf-m-width-10 {
  align-content: center;
}

// Updates the expand button to be 36.5px wide to match menu toggle button width
.mui-theme .pf-v6-c-table__td.pf-v6-c-table__toggle .pf-v6-c-button.pf-m-plain {
  --pf-v6-c-button--PaddingInlineStart: 6px;
  --pf-v6-c-button--PaddingInlineEnd: 6px;
}

.mui-theme .pf-v6-c-label {
  --pf-v6-c-label--BorderRadius: 16px;
  --pf-v6-c-label--FontSize: 0.8125rem;
  --pf-v6-c-label--PaddingInlineEnd: var(--mui-spacing-8px);
  --pf-v6-c-label--PaddingInlineStart: var(--mui-spacing-8px);
  --pf-v6-c-label--PaddingBlockStart: 0;
  --pf-v6-c-label--PaddingBlockEnd: 0;
  height: 24px;
}

.mui-theme .pf-v6-c-label.pf-m-overflow {
  border: 1px solid var(--mui-palette-grey-400);

  .pf-v6-c-label__text {
    color: var(--mui-palette-common-black);
  }
}

.mui-theme .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
  --pf-v6-c-button__icon--Color: var(--mui-palette-common-white);
  --pf-v6-c-button--PaddingInlineStart: var(--mui-spacing-4px);
  --pf-v6-c-button--PaddingInlineEnd: var(--mui-spacing-4px);
}

.mui-theme .pf-v6-c-label {
  --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--inverse);
}

.mui-theme .pf-v6-c-label-group.pf-m-category {
  --pf-v6-c-label-group--m-category--BorderWidth: 0px;
  --pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius);
  box-shadow: var(--mui-shadows-1);
}

.mui-theme .pf-v6-c-label.pf-m-outline {
  --pf-v6-c-label--BorderColor: none;
  --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
}

.mui-theme .pf-v6-c-masthead {
  --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
  box-shadow: var(--mui-shadows-1);
  min-height: var(--kf-central-app-bar-height);
}

.mui-theme .pf-v6-c-modal-box {
  --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius);
  --pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24);
}

.mui-theme .pf-v6-c-page__main-container {
  --pf-v6-c-page__main-container--BorderWidth: 0px;
  --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
  box-shadow: var(--mui-shadows-1);
}

.mui-theme .pf-v6-c-page__main-group.pf-m-sticky-top {
  flex-grow: 0;
}

// TODO: Remove when https://github.com/patternfly/patternfly-react/issues/11826 is resolved.
.pf-v6-c-page__main-section .pf-v6-c-page__main-body {
  height: 100%;
}

.mui-theme .pf-v6-c-pagination {
  --pf-v6-c-pagination__total-items--Display: block;
}

.mui-theme .pf-v6-c-pagination__total-items b {
  font-weight: normal;
}

.mui-theme .pf-v6-c-pagination__page-menu {
  order: -1;
}

.mui-theme .pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: none;
  --pf-v6-c-menu-toggle--hover--BackgroundColor: none;
  text-transform: none;
}

.mui-theme .pf-v6-c-pagination__page-menu::before {
  content: 'Rows per page:';
}

.mui-theme .pf-v6-c-page__sidebar {
  position: absolute;
  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
  /* Sidebar width */
  height: 100vh;
  /* Take full height of viewport */
  z-index: 300;
  /* Position sidebar above the masthead */
}

.mui-theme .pf-v6-c-page__main-container {
  margin-top: var(--kf-central-app-bar-height);
  /* Move content area below the app bar */
}

/* Hide Masthead Toggle by default */
.mui-theme .pf-v6-c-masthead__toggle {
  display: none;
}

/* Show Masthead Toggle on viewports below 1270px */
@media (max-width: 1270px) {
  .mui-theme .pf-v6-c-masthead__toggle {
    display: block;
    padding-block-start: var(--mui-spacing-4px);
  }
}

@media (min-width: 1270px) {
  .mui-theme .pf-v6-c-masthead {
    padding-left: var(--kf-central-app-drawer-width);
  }
}

.mui-theme .pf-v6-c-toolbar__group.pf-m-filter-group .pf-v6-c-form-control {
  // Override default form control padding to match button padding in this context
  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-8px);
  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-8px);
}

// Fix hover state margin issue by removing problematic padding
.mui-theme .pf-v6-c-menu__list {
  --pf-v6-c-content--list--PaddingInlineStart: 0;
}

.mui-theme .pf-v6-c-expandable-section .pf-v6-c-expandable-section__content {
  margin-block-end: var(--mui-spacing-16px);
}

.mui-theme .workspacekind-file-upload {
  height: 100%;

  .pf-v6-c-file-upload__file-details {
    flex-grow: 1;
  }
}

/* Workaround for Toggle group header in Workspace Kind Form */
.mui-theme .workspace-kind-form-header .pf-v6-c-toggle-group__button.pf-m-selected {
  background-color: #e0f0ff;
  color: var(--pf-t--color--black);
}


.mui-theme .pf-v6-c-menu__item {
  &.pf-m-selected {
    --pf-v6-c-menu__item--BackgroundColor: rgba(
      var(--mui-palette-primary-mainChannel, 25 118 210) /
        var(--mui-palette-action-selectedOpacity, 0.08)
    );
    --pf-v6-c-menu__item--FontWeight: var(--mui-button-font-weight);

    .pf-v6-c-menu__item-select-icon {
      visibility: hidden;
    }
  }
}

.mui-theme button.pf-v6-c-menu-toggle {
  // Use box-shadow to create a border effect without affecting the layout
  &.pf-m-expanded,
  &:focus {
    box-shadow: 0 0 0 2px var(--mui-palette-primary-main);
    outline: none; // Remove default browser outline
  }
}