@import "global-variables";

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

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

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

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

    .pf-v5-c-card__title {
        padding: 0;
        font-weight: var(--pf-v5-global--FontWeight--normal);
        font-size: var(--pf-v5-global--FontSize--sm);

        .pod-name {
            font-weight: var(--pf-v5-global--FontWeight--bold);
            font-size: var(--pf-v5-global--FontSize--md);
            padding-inline-end: 1rem;
        }
    }

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

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

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

.pod-stat {
    @media (max-width: $pf-v5-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;
    }
}

.ct-table-empty td {
    padding-block: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--lg);
    padding-inline: var(--pf-v5-global--spacer--md);
}

/* 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/3714 */
.containers-containers .pf-v5-c-toolbar__content-section {
    gap: var(--pf-v5-global--spacer--sm);
}

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