/*** PF4 overrides ***/
// Pull in variables (for breakpoints)
@use "global-variables" as *;

/* WORKAROUND: Navigation problems with Tertiary Nav widget on mobile */
/* See: https://github.com/patternfly/patternfly-design/issues/840 */
/* Helper mod to wrap pf-c-nav__tertiary */
.ct-m-nav__tertiary-wrap {
  .pf-c-nav__list {
    flex-wrap: wrap;
  }

  .pf-c-nav__scroll-button {
    display: none;
  }
}

/* Helper mod to center pf-c-nav__tertiary when it wraps */
.ct-m-nav__tertiary-center {
  .pf-c-nav__list {
    justify-content: center;
  }
}

/* Fix overflow issue with tabs, especially seen in small sizes, like mobile
seen in:
- https://github.com/cockpit-project/cockpit-podman/pull/897#issuecomment-1127637202
- https://github.com/patternfly/patternfly/issues/1625
- https://github.com/patternfly/patternfly/pull/2757
- https://github.com/patternfly/patternfly/issues/4800
- https://github.com/patternfly/patternfly-design/issues/840
- https://github.com/patternfly/patternfly-design/issues/1034
- https://github.com/cockpit-project/cockpit-podman/issues/845

This disables the large and halfway useless overflow buttons and causes the tabs
to wrap around when there isn't enough space.
*/
.pf-c-tabs__list {
  flex-wrap: wrap;
}

/* Fix select menu rendering */
ul.pf-c-select__menu {
  /* Don't get too tall */
  max-height: min(20rem, 50vh);
  /* Don't have a horizontal scrollbar */
  overflow-y: auto;
}

/* Adjust padding on form selects to resemble PF non-form selects */
/* (This can be seen when the longest text is selected on a non-stretched select) */
/* Upstream: https://github.com/patternfly/patternfly/issues/4387 */
/* Cockpit-Podman: https://github.com/cockpit-project/cockpit-podman/issues/755 */
select.pf-c-form-control {
  --pf-c-form-control--PaddingRight: 41px;
  --pf-c-form-control--PaddingLeft: 8px;

  // Firefox's select text has additional padding (4px)
  @-moz-document url-prefix() {
    --pf-c-form-control--PaddingRight: 37px;
    --pf-c-form-control--PaddingLeft: 4px;
  }
}

/* All SVGs used in PF4 have some inline style to align them
 * https://github.com/patternfly/patternfly-react/issues/4767
 */
svg {
  vertical-align: -0.125em;
}

// The default gap between the rows in horizontal lists is too large
.pf-c-description-list.pf-m-horizontal-on-sm,
.pf-c-description-list.pf-m-horizontal {
  --pf-c-description-list--RowGap: 1rem;
}

.pf-c-description-list {
  // When using horizontal ruler inside description list it's just for the spacing - don't show it
  > hr {
    border-top: none;
  }
}

.pf-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-c-modal-box__footer {
    flex-wrap: wrap;
    gap: var(--pf-global--spacer--sm);

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

.pf-c-card {
  // https://github.com/patternfly/patternfly/issues/3959
  --pf-c-card__header-toggle--MarginTop: 0;

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

    > .pf-c-card__actions {
      flex-wrap: wrap;
      row-gap: var(--pf-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-left: unset;
    }
  }
}

// Alignment of checks is incorrect and inconsistent across browsers
// Upstream issue: https://github.com/patternfly/patternfly/issues/3868
.pf-c-check > .pf-c-check__input {
  // Set the height of the input widget to be the same as its label
  --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
  // Offset by the top half of the difference between the height and the line height
  --pf-c-check__input--MarginTop: calc((var(--pf-c-check__label--LineHeight) - 1) / 2 * var(--pf-c-check__input--Height));
  // PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
  margin-top: var(--pf-c-check__input--MarginTop);
}

// Alignment of checks is incorrect and inconsistent across browsers
// Upstream issue: https://github.com/patternfly/patternfly/issues/3868
.pf-c-radio > .pf-c-radio__input {
  // Set the height of the input widget to be the same as its label
  --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
  // Offset by the top half of the difference between the height and the line height
  --pf-c-radio__input--MarginTop: calc((var(--pf-c-radio__label--LineHeight) - 1) / 2 * var(--pf-c-radio__input--Height));
  // PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
  margin-top: var(--pf-c-radio__input--MarginTop);
}

// Add some spacing to nested form groups - PF4 does not support these yet
// https://github.com/patternfly/patternfly-design/issues/1012
.pf-c-form__group-control {
  .pf-c-form__group, .pf-c-form__section {
    padding-top: var(--pf-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-c-alert level.
// https://github.com/patternfly/patternfly/issues/4206
.pf-c-alert__title {
  font-size: inherit;
  font-family: inherit;
}

.pf-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-global--breakpoint--lg - 1) {
      display: flex;
      flex-wrap: wrap;

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

      .pf-c-toolbar__content-section {
        width: auto;
      }
    }
  }
}

// When there is an Alert above the Form add some spacing
.pf-c-modal-box .pf-c-alert + .pf-c-form {
  padding-top: var(--pf-global--FontSize--sm);
}

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

    .pf-c-button__icon {
      margin-right: var(--pf-global--spacer--sm);
    }
  }
}

// Flex should use gap, not a margin hack
// https://github.com/patternfly/patternfly/issues/4523
.pf-l-flex {
  gap: var(--pf-l-flex--spacer-base);

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

  // Undo all spacer modification adjustments
  &[class*="pf-m-space-items-"] {
    > * {
      --pf-l-flex--spacer: 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-l-flex--spacer-base: var(--pf-l-flex--spacer--#{$size});
    }
  }
}

// InputMenus now use the PF Panel component which mistakenly uses position:
// relative, when it needs to be set to absolute.
// Additionally, it needs to be full width to properly align to the widget the
// popover panel describes.
// https://github.com/patternfly/patternfly-react/issues/7592
.pf-c-search-input__menu.pf-c-panel {
  position: absolute;
  width: 100%;
}

// 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-c-breadcrumb__link {
  cursor: pointer;
}

//Page headers are inconsistent with shadows and borders
// https://github.com/patternfly/patternfly/issues/5184
.pf-c-page__main-group,
.pf-c-page__main-nav,
.pf-c-page__main-section.pf-m-light:not(:last-child) {
  z-index: var(--pf-c-page--section--m-shadow-bottom--ZIndex);
  box-shadow: var(--pf-c-page--section--m-shadow-bottom--BoxShadow);
}

// Dark mode fixes for several PF components
.pf-theme-dark {
  // Fix dropmarker showing as check icon
  // https://github.com/patternfly/patternfly/issues/5215
  .pf-c-form-control {
    --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23e0e0e0' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
  }

  // Fix PF disabled colors
  :disabled, .pf-m-disabled, .pf-m-aria-disabled {
    // Darken background; otherwise it matches active dropdowns and inputs
    --pf-c-button--disabled--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
    // Bump up text to AA contrast, from PF color 400
    --pf-c-button--disabled--Color: #8d9093;
  }

  // Fix PF disabled colors again, for modals
  .pf-c-modal-box :is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) {
    // Alter background again, otherwise it matches modal background
    --pf-c-button--disabled--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
  }

  // Change background color behind cards
  // (matches PF surge website; PF doesn't specify otherwise)
  .pf-c-page__main-section {
    --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
  }

  // Adapt breadcrumb bar to be similar color as PF website
  // (We use header bars in slightly different ways from PF)
  .pf-c-page__main-breadcrumb,
  .pf-c-page__main-breadcrumb + .pf-c-page__main-section {
    --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
    background-color: var(--pf-global--BackgroundColor--dark-100);
  }

  // Fix input group background and borders
  // (Looks fixed in PF5, but not in PF4)
  .pf-c-text-input-group {
    background-color: var(--pf-global--BackgroundColor--400);

    .pf-c-text-input-group__text {
      &::before {
        border-top-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
      }

      &:is(:focus,:hover)::after {
        border-bottom-color: var(--pf-global--active-color--100);
      }

      &:not(:focus):not(:hover)::after {
        border-bottom-color: var(--pf-global--BorderColor--400);
      }
    }
  }

    // PatternFly doesn't define gold color in dark mode
  .pf-c-label {
    --pf-c-label--m-gold--BackgroundColor: var(--pf-global--BackgroundColor--300);
    --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-100);

    &.pf-m-gold {
      --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
    }
  }

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

// Override PF to fix Right to Left languages
[dir="rtl"] {
  // Flip outlines for buttons
  .pf-m-split-button {
    button::before {
      transform: scaleX(-100%);
    }
  }

  // Swap image padding in buttons
  .pf-c-dropdown__toggle-image {
    margin-right: unset;
    gap: var(--pf-c-dropdown__toggle-image--MarginRight);
  }

  // PatternFly and us are setting text-align to the left.
  // It needs to be to the start.
  // We should change it to start where we can.
  // Meanwhile, here's an override just for RTL.
  body, td, th {
    text-align: start;
  }

  // Swap side of selected nav's blue line
  .pf-c-nav__link.pf-m-current {
    &, &:hover, &:not(.pf-m-expanded) .pf-c-nav__link {
      &::after {
        width: 100%;
        transform: scaleX(-100%);
      }
    }
  }

  // Toolbar content (as seen in the shell) should be left aligned in RTL
  // See: https://github.com/patternfly/patternfly/issues/3812
  .pf-c-toolbar__content {
    margin-right: auto;
    margin-left: 0;
  }

  // Dropdown toggles: Swap image margins to be on left instead
  .pf-c-dropdown__toggle {
    &-image {
      margin-right: 0;
      margin-left: var(--pf-c-dropdown__toggle-image--MarginRight);
    }

    &-icon {
      margin-right: var(--pf-c-dropdown__toggle-icon--MarginLeft);
      margin-left: var(--pf-c-dropdown__toggle-icon--MarginRight);
    }
  }

  // Flip popup directions, part 1 of 2
  .pf-c-dropdown .pf-c-menu.pf-m-align-right,
  .pf-c-dropdown__menu.pf-m-align-right {
    right: unset;
    left: 0;
  }

  // Flip popup directions, part 2 of 2
  .pf-c-dropdown .pf-c-menu.pf-m-align-left,
  .pf-c-dropdown__menu.pf-m-align-left {
    right: 0;
    left: unset;
  }

  // Another case of aligning to the left instead of start
  .pf-c-dropdown__menu-item {
    text-align: start;
  }

  // Flip breadcrum divider
  .pf-c-breadcrumb__item-divider {
    transform: scaleX(-100%);
  }
}

// Drop side padding in mobile mode,
// intended mainly for PF PageSection elements (pf-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.
@media screen and (max-width: $pf-global--breakpoint--sm) {
  .pf-c-page__main > section.pf-c-page__main-section:not(.pf-m-padding) {
    padding-left: 0;
    padding-right: 0;
  }
}
