:root {
  --pf-x-base-color: Highlight;

  --pf-t--global--color--brand--100: color-mix(
    in srgb,
    var(--pf-x-base-color) 80%,
    white
  );
  --pf-t--global--color--brand--200: var(--pf-x-base-color);
  --pf-t--global--color--brand--300: color-mix(
    in srgb,
    var(--pf-x-base-color) 80%,
    black
  );
  --pf-t--global--color--severity--none--100: var(
    --pf-t--global--color--brand--100
  );
  --pf-t--global--text--color--link--100: var(
    --pf-t--global--color--brand--100
  );
  --pf-t--global--text--color--link--200: var(
    --pf-t--global--color--brand--200
  );
  --pf-t--global--text--color--link--300: var(
    --pf-t--global--color--brand--300
  );

  --pf-t--global--dark--color--brand--100: color-mix(
    in srgb,
    var(--pf-x-base-color) 80%,
    white
  );
  --pf-t--global--dark--color--brand--200: var(--pf-x-base-color);
  --pf-t--global--dark--color--brand--300: color-mix(
    in srgb,
    var(--pf-x-base-color) 80%,
    black
  );
  --pf-t--global--dark--color--severity--none--100: var(
    --pf-t--global--dark--color--brand--100
  );
  --pf-t--global--dark--text--color--link--100: var(
    --pf-t--global--dark--color--brand--100
  );
  --pf-t--global--dark--text--color--link--200: var(
    --pf-t--global--dark--color--brand--200
  );
  --pf-t--global--dark--text--color--link--300: var(
    --pf-t--global--dark--color--brand--300
  );
}

.pf-v6-x-c-brand--main {
  max-width: 12.5rem;
}

.pf-v6-x-c-brand--nav {
  height: 50px;
}

.pf-v6-x-ws-router {
  height: 100vh;
}

.pf-v6-x-u-resize-none {
  resize: none;
}

/* A nested dialog */
.pf-v6-x-m-modal-overlay {
  z-index: calc(var(--pf-v6-global--ZIndex--lg) + 1);
}

/* Backdrop which doesn't overlap */
.pf-v6-x-c-backdrop--nested {
  padding-top: var(
    --pf-v6-c-page__header--MinHeight
  ); /* TODO: This does depend on the navbar being no higher than the min value; in the future, object queries might be used. */
}

.pf-v6-x-m-gap-md {
  gap: var(--pf-v6-global--spacer--md);
}

/* Prevent unnecessary vertical scrolling in variable height text editors */
.pf-v6-x-m-overflow-y-hidden {
  overflow-y: hidden;
}

/* Re-add old selectable card state styling for plain cards */
.pf-v6-c-card.pf-m-plain.pf-m-selectable {
  cursor: pointer;
  outline: var(--pf-v6-c-card--m-selectable--BorderWidth) solid
    var(--pf-v6-c-card--BorderColor, transparent);
}

.pf-v6-c-card.pf-m-plain.pf-m-selectable:hover,
.pf-v6-c-card.pf-m-plain.pf-m-selectable:focus {
  --pf-v6-c-card--BorderColor: var(
    --pf-v6-c-card--m-selectable--hover--BorderColor
  );
}

.pf-v6-x-u-position-absolute {
  position: absolute;
}

@media (max-width: 48rem) {
  .pf-v6-c-menu.pf-v6-x-u-position-absolute {
    left: 0;
    width: 100%;
  }
}

@media (prefers-color-scheme: light) {
  .pf-v6-c-brand--dark {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .pf-v6-c-brand--light {
    display: none;
  }
}

.pf-v6-x-dropdown-menu {
  z-index: 100;
}

.pf-v6-c-breadcrumb__list {
  flex-wrap: nowrap;
}

.pf-v6-c-breadcrumb__link {
  white-space: nowrap;
}