/* SPDX-License-Identifier: LGPL-2.1-or-later */
/*** PF6 overrides ***/
// Pull in variables (for breakpoints)
@use "../global-variables" as *;

$phone: 767px;

// PF Select is deprecated - no issue reported upstream - this needs to be removed from our codebase
// Make select have the expected width
// REVIEW @Venefilyn: Check if still relevant
.pf-v6-c-select[data-popper-reference-hidden="false"] {
  inline-size: auto;
}

/* New issue based on the regression based on workaround causing this issue: https://github.com/cockpit-project/cockpit/issues/21671
*/
/* Old upstream: https://github.com/patternfly/patternfly/issues/4387 */
/* Old Cockpit-Podman: https://github.com/cockpit-project/cockpit-podman/issues/755 */
.pf-v6-c-form-control > select {
  /* Right side needs to compensate for the icon and space around it,
  for all browsers */
  --pf-v6-c-form-control--PaddingInlineEnd: calc(
    var(--pf-t--global--font--size--body--default) + var(--pf-t--global--spacer--lg)
  );

  @-moz-document url-prefix() { // stylelint-disable-line at-rule-no-vendor-prefix
    /* "Unset" Firefox special handling in PatternFly; using consistent
    spacing with others; this can be removed after PatternFly removes it */
    --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
  }
}

// Fix the double-spacing issue in the non-deprecated split buttons
// https://github.com/patternfly/patternfly/issues/6632
// REVIEW @Venefilyn: not fixed upstream
.pf-m-split-button .pf-v6-c-menu-toggle__controls {
  margin: 0;
}

// Fix menus cropping contents
// https://github.com/patternfly/patternfly/issues/6565
// NOTE @Venefilyn: Might need to migrate to some other component
.pf-v6-c-menu__item-text {
  overflow: visible;
}

// The default gap between the rows in horizontal lists is too large
.pf-v6-c-description-list.pf-m-horizontal-on-sm,
.pf-v6-c-description-list.pf-m-horizontal {
  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--300); // 1rem
}

.pf-v6-c-modal-box.pf-m-align-top {

  // We utilize custom footers in dialogs
  // Make sure that the buttons always appear in the next line from the inline alerts
  .pf-v6-c-modal-box__footer {
    flex-wrap: wrap;
    row-gap: var(--pf-t--global--spacer--sm);

    > div:not(.pf-v6-c-button):not(.dialog-wait-ct) {
      flex: 0 0 100%;
    }
  }
}

// don't hide long dialog titles
.pf-v6-c-modal-box__title-text {
  white-space: normal;
}

// Modals should accommodate content width, as languages can make elements (especially buttons) too long
// https://github.com/patternfly/patternfly/issues/7440
.pf-v6-c-modal-box {
  min-inline-size: min-content;
}


.pf-v6-c-card {
  // FIXME: Using an expandable content within a card would cause the card to be scrollable while nothing
  // would be in view. Makes it look like there is something to scroll to when there isn't anything.
  // PF deliberately makes expandable `[hidden]` content have `display: revert` which would make them have
  // `display: block` or whatever is default from the browser. They do this to make animations work.
  // Until fixed upstream we revert their `display: revert` rule.
  // https://github.com/patternfly/patternfly/issues/7746
  .pf-v6-c-expandable-section__content:where([hidden]) {
    display: none;
  }

  // https://github.com/patternfly/patternfly/issues/3959
  // TODO @Venefilyn: Change so we use .pf-m-no-offset, then remove this
  // --pf-v6-c-card__header-toggle--MarginTop: 0;

  .pf-v6-c-card__header:not(.ct-card-expandable-header),
  .pf-v6-c-card__header:not(.ct-card-expandable-header) .pf-v6-c-card__header-main {
    // upstream fix (pending): https://github.com/patternfly/patternfly/pull/3714
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--pf-t--global--spacer--sm);
    justify-content: space-between;
  }

  .pf-v6-c-card__header:not(.ct-card-expandable-header) {
    > .pf-v6-c-card__actions {
      flex-wrap: wrap;
      row-gap: var(--pf-t--global--spacer--sm);

      // PF4 CardActions act up when using buttons while the title is large of font
      // https://github.com/patternfly/patternfly/issues/3713
      // https://github.com/patternfly/patternfly/issues/4362
      margin: unset;
      padding-inline: var(--pf-v6-c-card__actions--PaddingLeft) unset;
    }
  }
}

// Add some spacing to nested form groups - PF4 does not support these yet
// https://github.com/patternfly/patternfly-design/issues/1012
.pf-v6-c-form__group-control {
  .pf-v6-c-form__group,
  .pf-v6-c-form__section {
    padding-block-start: var(--pf-t--global--spacer--md);
  }
}

// Alerts use elements that have fonts set in other frameworks (including PF3);
// generally, this is an H4 that often has a font size and sometimes family set.
// Therefore, it should inherit from the alert font set at the pf-v6-c-alert level.
// https://github.com/patternfly/patternfly/issues/4206
.pf-v6-c-alert__title {
  font-size: inherit;
  font-family: inherit;
}

.pf-v6-c-toolbar {
  // Make summary content use the same vertical space as the filter toggle,
  // when possible.
  // https://github.com/patternfly/patternfly-design/issues/1055
  &.ct-compact {
    @media screen and (max-width: $pf-v6-global--breakpoint--lg - 1) {
      display: flex;
      flex-wrap: wrap;

      > .pf-v6-c-toolbar__content:first-child {
        flex: auto;
      }

      .pf-v6-c-toolbar__content-section {
        inline-size: auto;
      }
    }
  }
}

// When there is an Alert above the Form add some spacing
.pf-v6-c-modal-box .pf-v6-c-alert + .pf-v6-c-form {
  padding-block-start: var(--pf-t--global--font--size--sm);
}

// HACK: Not possible to specify text, so needs some hacks, see https://github.com/patternfly/patternfly-react/issues/6140
.pf-v6-c-toolbar__toggle {
  .pf-v6-c-button.pf-m-plain {
    color: var(--pf-v6-c-button--m-link--Color);

    .pf-v6-c-button__icon {
      margin-inline-end: var(--pf-t--global--spacer--sm);
    }
  }
}

// Flex should use gap, not a margin hack
// https://github.com/patternfly/patternfly/issues/4523
// Override default spacing from lg -> md
.pf-v6-l-flex {
  gap: var(--pf-v6-l-flex--spacer-base);

  &:not([class*="pf-m-space-items-"]) {
    gap: var(--pf-v6-l-flex--spacer--md);

    > * {
      --pf-v6-l-flex--spacer--column: 0;
    }
  }

  // Negate the margin hack used by immediate flex children
  // (except for nested flex, as we want to mind the gap)
  > :not(.pf-v6-l-flex) {
    --pf-v6-l-flex--spacer-base: 0;
  }

  // Undo all spacer modification adjustments
  &[class*="pf-m-space-items-"] {
    > * {
      --pf-v6-l-flex--spacer--column: 0;
    }
  }

  // Re-add spacer modification adjustments on the flex layout widget
  // (using class attribute matching for handling breakpoint -on- also)
  @each $size in (none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl) {
    &[class*="pf-m-space-items-#{$size}"] {
      --pf-v6-l-flex--spacer-base: var(--pf-v6-l-flex--spacer--#{$size});
    }
  }
}

// PF Modals has a brighter background than normal pages in dark mode.
// Tables are made to match the background but since modals change background
// this is something we need to change ourselves
// https://github.com/patternfly/patternfly/issues/5278
.pf-v6-c-modal-box .pf-v6-c-table {
  background-color: inherit;
}

// Breadcrumb links should have the correct pointing hand cursor.
//
// PatternFly requires a "to" attribute for an actual link, but we use some
// funky onClick JS for navigating and override it with a className.
//
// Therefore, instead of having a proper <a href="..."> being rendered, we need
// to override the link. This is a problem with a (correct) assumption in PF
// and our (incorrect) way of not using links (but using JavaScript) for
// linking.
//
// Nevertheless, Cockpit needs to be adapted for this to work as expected.
.pf-v6-c-breadcrumb__link {
  cursor: pointer;
}

// Dark mode fixes for several PF components
.pf-v6-theme-dark {

  // FIXME: https://github.com/patternfly/patternfly/issues/5278
  .pf-v6-c-modal-box .pf-v6-c-table {
    background-color: inherit;
  }

  // FIXME: Force FormSelect's to get a readable background.
  // https://github.com/patternfly/patternfly/issues/7593
  // https://issues.redhat.com/browse/RHEL-97180
  .pf-v6-c-form-control select:not(:disabled) {
      background-color: var(--pf-t--global--background--color--floating--default);
  }
}

@media screen and (max-width: $pf-v6-global--breakpoint--md) {
  // Reduce side padding in mobile mode,
  // intended mainly for PF PageSection elements (pf-v6-c-page__main-section).
  // It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
  // except this only affects the sides, not the top and bottom.
  .pf-v6-c-page__main>section.pf-v6-c-page__main-section:not(.pf-m-padding) {
    padding-inline: var(--pf-t--global--spacer--xs);
  }
}

// Override as PF Page doesn't allow empty masthead and sidebar
@media (min-width: 75rem) {
  // Please use .pf-m-no-sidebar instead as it is the new class name in PF for this
  .pf-v6-c-page.no-masthead-sidebar { /* custom class to scope this style to a specific page component instance */
    --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
  }
}

/* FIXME: Temporary rework plain cards to make it look like how PF6 is designed, removing the extra padding */
.pf-v6-c-card.pf-m-plain {
  // Plain PF Cards just remove the border color and background, but we should also make sure that the radius is
  // removed so that tables etc. don't get weird borders on the first and last cell.
  // This mostly happens when we're not using card body
  border-radius: 0;

  .pf-v6-c-card__header, > .pf-v6-c-card__title {
    padding-inline: 0;
  }

  .pf-v6-c-card__body.contains-list {
    padding: 0;
  }
}

// FIXME: Temporary rework table cards in mobile/small view to have row dividers between each row.
.pf-v6-c-card.ct-small-table-card {
  border-block-start: var(--pf-t--global--border--width--100) solid var(--pf-t--global--border--color--default);
  border-radius: var(--pf-t--global--border--radius--0);
}

// NOTEs @Venefilyn: Expandable table has an alignment issue with the expand button and the text
// Tracked upstream here https://github.com/patternfly/patternfly/issues/7423
.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle:has(.pf-v6-c-button:not(.pf-m-small)) {
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: 0
}

// HACK: Patternfly has a weird issue with modals and skip to content
// button not being hidden as it should on rtl mode. Instead, it will make the
// page extremely wide and cause modals to be very offset. Changing from
// `absolute` to `fixed` makes sure that it all works as it should.
//
// Only applicable to Firefox, works fine in Chrome. Might also be fine outside
// of Firefox Responsive Design Mode. Verified to be an issue in PF v6.2.0
//
// https://github.com/patternfly/patternfly/issues/7463
.pf-v6-c-skip-to-content {
  position: fixed;
}

// FIXME @Venefilyn: Due to a Patternfly bug when it comes to showing the
// scrollbars of subnavs, we have to workaround it by just making it wrap
// instead of scroll. (ugly but functional).
// Issue found in PF 6.2.0
// https://github.com/patternfly/patternfly-react/issues/11751
.services-header .pf-m-subnav {
  --pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--200);

  .pf-v6-c-nav__list {
    flex-wrap: wrap;
  }
}

// NOTE: PF6 workaround, when table is in the small screen layout PF sets too big font-weight
// https://github.com/patternfly/patternfly/issues/7526
.pf-v6-c-table .pf-v6-c-table__tbody :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
    font-weight: var(--pf-t--global--font--weight--body--bold);
}

// NOTE: Though Patternfly includes the icon content important severity color
// it is primarily used for severity icons that are not exposed in PF React but
// instead part of a different PF Component Group
// https://www.patternfly.org/patterns/status-and-severity/#severity-icons
// https://www.patternfly.org/component-groups/status-and-state-indicators/severity
.pf-v6-c-icon.pf-m-important {
  --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--severity--important--default);
}

// HACK: Patternfly 6.6.0 migrated from the deprecated word-break to overflow-wrap
// incorrectly and did a text-replace from `word-break: break-word` to
// `overflow-wrap: break-word`. According to MDN the behaviour is different and
// should instead be `overflow-wrap: anywhere`.
// Reverts https://github.com/patternfly/patternfly/commit/fff5587739106601d9c1e4b27f090c16603ce3a1
// Bug report https://github.com/patternfly/patternfly/issues/8484
// MDN note https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break#break-word
.pf-v6-c-alert__title,
.pf-v6-c-clipboard-copy__text,
.pf-v6-c-menu__item-description,
.pf-v6-c-modal-box__body,
.pf-v6-c-notification-drawer__group-toggle-title,
.pf-v6-c-notification-drawer__list-item-description,
.pf-v6-c-notification-drawer__list-item-header-title,
.pf-v6-c-progress__description,
.pf-v6-c-progress__status,
.pf-v6-c-title,
.pf-v6-c-tooltip__content,
.pf-v6-c-wizard__main,
.pf-v6-c-wizard__nav-link,
.pf-v6-c-wizard__toggle-list-item {
  overflow-wrap: anywhere;
}