@use "global-variables" as *; /* for $pf-v6-global--breakpoint--sm */

.container-pod {
    .pf-v6-c-card__header {
        border-color: #ddd;
        padding-block-start: var(--pf-t--global--spacer--md);
    }

    .pod-header-details {
	border-color: #ddd;
	margin-block-start: var(--pf-t--global--spacer--md);
	margin-inline: var(--pf-t--global--spacer--md);
    }

    .pod-details-button {
       padding-inline: 0;
       margin-inline-end: var(--pf-t--global--spacer--md);
    }

    .pod-details-button-color {
       color: var(--pf-v6-c-button--m-secondary--Color);
    }

    .pf-v6-c-card__title {
        padding: 0;
        font-weight: var(--pf-t--global--font--weight--body);
        font-size: var(--pf-t--global--font--size--md);

        .pod-name {
            font-weight: var(--pf-t--global--font--weight--300);
            font-size: var(--pf-t--global--font--size--md);
            padding-inline-end: 1rem;
        }
    }

    > .pf-v6-c-card__header {
        &:not(:last-child) {
            padding-block-end: var(--pf-t--global--spacer--sm);
        }

        // Reduce vertical padding of pod header items
        > .pf-v6-c-card__title > .pf-l-flex {
            row-gap: var(--pf-t--global--spacer--sm);
        }
    }
}

// override ct-card font size, so cpu/ram don't look absurdly big
#app .pf-v6-c-card.container-pod div.pf-v6-c-card__title-text {
    font-weight: normal;
    font-size: var(--pf-t--global--font--size--md);
}

.pod-stat {
    @media (max-width: $pf-v6-global--breakpoint--sm - 1) {
        // Place each pod stat on its own row
        flex-basis: 100%;
        display: grid;
        // Give labels to the same space
        grid-template-columns: minmax(auto, 4rem) 1fr;

        > svg {
            // Hide icons in mobile to be consistent with container lists
            display: none;
        }
    }

    // Center the icons for proper vertical alignment
    > svg {
        align-self: center;
    }
}

/* HACK - force DescriptionList to wrap but not fill the width */
#container-details-healthcheck {
    display: flex;
    flex-wrap: wrap;
}

/* Upstream issue https://github.com/patternfly/patternfly/pull/7396
 * Will be fixed in PF v6.2.0
 */
.containers-containers .pf-v6-c-toolbar__content-section {
    gap: var(--pf-t--global--spacer--sm);
}

/* Drop the excessive margin for a Dropdown button */
.containers-containers .pf-v6-c-toolbar__content-section > :nth-last-child(2) {
    margin-inline-end: 0;
}
