@import "~@patternfly/patternfly/components/Table/table.scss";
@import "~@patternfly/patternfly/components/Table/table-grid.scss";

.ct-table {
    // Reverse out the default padding for table bodies,
    // so lists can have more horizontal room
    &-wrapper {
        // Container padding is defined higher up; it cascades here
        // (so this can always be in sync to reverse out the actual padding)
        --outer-padding: var(--continer-padding-x);
        --padding-offset-border: 1px;
        --padding-offset-x: calc(var(--pf-global--spacer--lg) + (var(--padding-offset-border) * 2));
        --padding-offset-y: 1rem;
        max-width: calc(100vw - (var(--outer-padding) * 2));
        overflow: auto;
        clear: both;
        padding-bottom: var(--padding-offset-y);
        margin-bottom: calc(var(--padding-offset-y) * -1);
        margin: calc(var(--padding-offset-y) * -0.5) calc(var(--padding-offset-x) * -1) calc(var(--padding-offset-y) * -1);

        // Apply standard padding to the sides of the header
        > .ct-table-header {
            padding: 0 var(--pf-global--spacer--md);
        }
    }

    &.pf-m-compact {
        > thead, > tbody {
            > tr:not(.pf-c-table__expandable-row) {
                // We actually want the normal font size for our lists
                --pf-c-table-cell--FontSize: var(--pf-global--FontSize--md);
            }
        }
    }

    &-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        > :only-child {
            flex: auto;
        }
    }

    &-heading {
        // Push buttons to the right by stretching the heading
        flex: auto;
        // Add a bit of minimum margin to the right of the heading
        margin-right: var(--pf-global--spacer--md);
        // Set a minimum height of 3rem, so when buttons wrap, there's spacing
        min-height: var(--pf-global--spacer--2xl);
        // Make sure textual content is aligned to the center
        display: flex;
        align-items: center;
    }

    &-actions {
        > * {
            margin: var(--pf-global--spacer--xs) 0 var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
        }

        > :first-child {
            margin-left: 0;
        }
    }

    &-empty {
        tr td {
            font-weight: normal;
            // FIXME removing !important will result in this not getting applied
            text-align: center !important;
        }
    }

    // Fix toggle button alignment
    .pf-c-table__toggle {
        // Workaround: Chrome sometimes oddly expands the table,
        // unless a width is set. (This affects panels the most, but not only.)
        // As the width is smaller than the contents, and this is a table,
        // the cell will stay at the correct width.
        width: 1px;

        > .pf-c-button {
            padding-top: var(--pf-global--spacer--sm);
            padding-bottom: var(--pf-global--spacer--sm);
            vertical-align: top;
            // Not every browser supports text-top, so define top (above) as a fallback
            vertical-align: text-top;
        }
    }

    // Shrink buttons down a little
    td:not(.pf-c-table__toggle) {
        > .pf-c-button,
        > .pf-c-input-group > .pf-c-button,
        > .btn-group > .pf-c-button {
            padding: 0.25rem 0.75rem;
        }
    }

    // Remove excess PF4 nested compact paddings
    // (as PF4 has different assumptions)
    .pf-c-table.pf-m-compact tr {
        > :first-child {
            --pf-c-table-cell--PaddingLeft: var(--pf-c-table--m-compact-cell--first-last-child--PaddingLeft);
        }

        > :last-child {
            --pf-c-table-cell--PaddingRight: var(--pf-c-table--m-compact-cell--first-last-child--PaddingLeft);
        }
    }

    // Make last column always right aligned
    > thead, > tbody {
        > tr:not(.pf-c-table__expandable-row) {
            > th, > td {
                &:last-child:not(.first-child) {
                    text-align: right;
                }
            }
        }
    }

    // Use PF4 style headings
    > thead th {
        font-size: var(--pf-global--FontSize--sm);
        font-weight: var(--pf-global--FontWeight--semi-bold);
    }

    .pf-m-expanded {
        // PF4 dropped the shadow of expanded tables
        box-shadow: none !important;
        // Re-add bottom line
        border-bottom: var(--pf-c-table--BorderWidth) solid var(--pf-c-table--BorderColor)
    }
}

// Special handling for rows with errors
.pf-c-table tbody tr:first-child.error {
    &, tbody.pf-m-expanded > & {
        background-color: var(--color-ct-list-critical-bg) !important; /* keep red background when expanded */
        border-top: 1px solid var(--color-ct-list-critical-border);
        border-bottom: 1px solid var(--color-ct-list-critical-border);

        &:focus,
        &:focus-within,
        &:hover {
            background-color: var(--color-ct-list-critical-bg-hover) !important;
            border-top-color: var(--color-ct-list-critical-bg-hover);
            border-bottom-color: var(--color-ct-list-critical-bg-hover);
        }
    }

    @media screen and (min-width: 641px) {
        td.version:hover .truncating {
            background: linear-gradient(to left, rgba(251, 240, 240, 0), var(--color-ct-list-critical-bg-hover) 3em);
        }
    }
}
