/*** 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;
}

ul.pf-c-select__menu {
    max-width: 20rem;
    max-height: 20rem;
    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 {
    // 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});
        }
    }
}
