/* stylelint-disable scss/operator-no-newline-after, no-descending-specificity */
.GridTable {
    --gridtable-bg-color: var(--tables-default-white);
    --gridtable-row-bg: var(--tables-default-white);

    background-color: var(--gridtable-bg-color);
    position: relative;
    width: 100%;
    display: grid;
    grid-template-rows: min-content max-content min-content;

    &-empty {
        margin: 4rem auto;
    }

    &-header {
        background-color: var(--gridtable-bg-color);
        border-bottom: $table-border;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        white-space: nowrap;

        &-left {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 20px;
        }

        &-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;
        }

        &:empty {
            border: none;
        }
    }

    &-loading,
    &-loading-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
    }

    &-loading-overlay {
        opacity: 0.5;
        background: var(--white);
    }

    &-loading-indicator {
        flex: 1;
    }

    &.bordered {
        border: $table-border;
        border-radius: 3px;
    }

    &.shadowed {
        box-shadow: 0 0 5px 0 rgba(28 28 28 / 5%);
    }

    &.loading-empty {
        min-height: 120px;
    }

    &.updating > &-loading {
        display: block;

        .GridTable-loading-indicator {
            height: auto;
            margin: 0 auto;
            position: sticky;
            top: 20px;
        }
    }

    &-table {
        display: grid;
        overflow: auto;
    }

    &-body,
    &-row {
        display: contents;
    }

    &-row {
        &.sticky {
            .GridTable-row-cell {
                position: sticky;
                z-index: 1;
                top: 0;

                &.fixed {
                    z-index: 2;
                }
            }
        }

        &.fixed {
            position: fixed;
            overflow: hidden;
            display: none;
            z-index: 2;

            @include box-shadow-bottom;
        }

        &.clickable {
            &:hover > .GridTable-row-cell {
                cursor: pointer;
                background-color: var(--tables-hover);
            }
        }
    }

    &-row-cell {
        display: flex;
        border-bottom: $table-border;
        background-color: var(--tables-default-white);

        &.sorted-0 {
            background-color: var(--tables-hover);
        }

        &.sorted-1 {
            background-color: #fcfcfc;
        }

        &.text-right {
            justify-content: end;
        }

        &.separator {
            border-left: $table-border;
        }

        &.fixed {
            left: 0;
            position: sticky;
            background-color: var(--tables-default-white);
            z-index: 1;
        }
    }

    &-column {
        @include text-table-header;

        align-items: flex-end;
        color: var(--text-secondary);
        justify-content: start;
        padding: 10px $table-cell-padding;
        text-transform: capitalize;

        &-container {
            display: flex;
            align-items: flex-end;
            gap: 10px;
            overflow: hidden;
        }

        &-text {
            text-overflow: ellipsis;
            overflow: hidden;
            user-select: none;
        }

        &.sortable {
            cursor: pointer;
        }

        &.sorted,
        &.sortable:hover {
            color: var(--gray-800);

            .SortDefaultGlyphIcon path {
                fill: var(--glyphs-default);
            }
        }

        &-sortable-indicator {
            visibility: hidden;

            .GridTable-column:hover & {
                visibility: visible;
            }
        }

        &-sort-indicator,
        &-tooltip-icon {
            margin-bottom: 3px;
            flex-shrink: 0;
        }

        &-tooltip-icon {
            line-height: 12px;
        }

        &-loading {
            cursor: default;
        }

        &.util-align-right {
            .GridTable-column-sort-indicator,
            .HelpTooltip {
                order: -1;
            }
        }
    }

    &-cell {
        align-items: center;
        padding: $table-cell-padding;
        white-space: nowrap;

        &-text {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .SkeletonLoader {
            min-width: 34px;
            height: 20px + 1px;
        }
    }

    &-container {
        overflow: hidden;

        &.scroll-right {
            box-shadow: inset -17px 0 15px -15px rgba(28 28 28 / 10%);
        }

        &.scroll-left {
            box-shadow: inset 17px 0 15px -15px rgba(28 28 28 / 10%);

            .GridTable-row-cell.fixed {
                @include box-shadow-right;
            }
        }

        &.scroll-left.scroll-right {
            box-shadow:
                inset -17px 0 15px -15px rgba(28 28 28 / 10%),
                inset 17px 0 15px -15px rgba(28 28 28 / 10%);
        }
    }

    &-body {
        > .GridTable-row:last-child .GridTable-cell {
            border-bottom-color: transparent;
        }
    }

    &-footer {
        border-top: $table-border;

        &:empty {
            border: none;
        }

        > .SuitePagination {
            margin: 0;
        }
    }

    &.with-auto-height {
        &.with-sticky-header {
            .GridTable-table {
                overflow: visible;
                overflow-x: auto;
            }

            .GridTable-header {
                z-index: 2;
                position: sticky;
            }
        }
    }

    /*
    * 'scroll-top' is set when the table is scrolled
    */
    &.scroll-top {
        &.with-sticky-header {
            .GridTable-header {
                @include box-shadow-bottom;
            }
        }

        .GridTable-row.sticky {
            .GridTable-row-cell {
                @include box-shadow-bottom;
            }
        }

        .GridTable-container.overflowing.scroll-left {
            .GridTable-row.sticky,
            .GridTable-row.fixed {
                > .GridTable-row-cell.fixed {
                    @include box-shadow-bottom-right;
                }
            }
        }
    }

    .util-align-right {
        justify-content: right;
        text-align: right;
    }

    .util-align-left {
        justify-content: left;
        text-align: left;
    }

    .util-align-center {
        justify-content: center;
        text-align: center;
    }

    .util-nowrap {
        white-space: nowrap;
    }

    .util-line-clamp {
        /* stylelint-disable value-no-vendor-prefix */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        /* stylelint-enable value-no-vendor-prefix */
    }

    .util-tabular-nums {
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }

    .util-center {
        align-items: center;
        justify-content: center;
    }

    .util-contents {
        display: contents;
    }

    &.zebra-variant {
        --gridtable-zebra-top-radius: var(--radius-medium);
        --gridtable-zebra-bottom-radius: var(--radius-medium);

        .GridTable-header {
            border: none;
        }

        .GridTable-select-all-header {
            border-radius: var(--radius-medium);
        }

        .GridTable-container:not(:first-child) {
            margin-top: var(--padding-medium-small);
        }

        .GridTable-row:not(.sticky) {
            .GridTable-row-cell:not(.fixed) {
                position: relative;
            }
        }

        .GridTable-row-cell:first-child {
            &::before {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                content: ' ';
                display: block;
                border-top-left-radius: var(--gridtable-zebra-top-radius);
                border-bottom-left-radius: var(--gridtable-zebra-bottom-radius);
                outline: var(--radius-medium) solid var(--gridtable-bg-color);
                clip-path: inset(0 8px 0 0);
                pointer-events: none;
            }
        }
        .GridTable-row.cell.fixed + .fixed::before {
            content: none;
        }

        .GridTable-row-cell:last-child {
            &::before {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                content: ' ';
                display: block;
                border-top-right-radius: var(--gridtable-zebra-top-radius);
                border-bottom-right-radius: var(--gridtable-zebra-bottom-radius);
                outline: var(--radius-medium) solid var(--gridtable-bg-color);
                clip-path: inset(0 0 0 8px);
                pointer-events: none;
            }
        }

        .GridTable-header-row {
            .GridTable-row-cell {
                background-color: var(--tables-header);
                padding: var(--padding-medium-small) var(--padding-medium-large);

                &.sorted {
                    &.sortable {
                        background-color: var(--tables-header-selected);
                    }
                }
                &.sortable:hover {
                    color: var(--midnight-750);

                    .GlyphIcon {
                        color: inherit;
                    }
                }
            }

            &.sticky .GridTable-row-cell {
                border-bottom-width: 3px;
            }
        }

        .GridTable-body .GridTable-row {
            &:nth-child(2n of :not(.fixed):not(.sticky)),
            &.even {
                .GridTable-row-cell {
                    --gridtable-row-bg: var(--tables-default-gray);
                }
            }
            &:nth-child(2n + 1 of :not(.fixed):not(.sticky)),
            &.odd {
                .GridTable-row-cell {
                    --gridtable-row-bg: var(--tables-default-white);
                }
            }
        }

        .GridTable-row-cell {
            padding: var(--padding-medium) var(--padding-medium-large);
            border: none;
            border-top: 1px solid var(--gridtable-bg-color);
            border-bottom: 1px solid var(--gridtable-bg-color);
            background-color: var(--gridtable-row-bg);
        }
    }
}