.table {
    width: 100%;
    text-align: left;
    border: none;
    border-spacing: 0;

    th,
    td {
        position: relative;
        line-height: 25px;
        vertical-align: top;
        background-clip: padding-box;

        &.selection {
            width: 25px !important;
            margin: 0;
        }

        &:last-child {
            padding-right: 20px;
        }

        .checkbox-label + .cell-content {
            margin-left: 10px;
        }

        &:not(.center) {
            text-align: left;
        }
    }

    thead tr {
        height: $table-header-height;
        color: var(--default-text-color);
        font-weight: var(--main-font-bold);
        font-size: $table-header-font-size;
        line-height: $table-header-line-height;
        background-color: transparent;
    }

    th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: $table-header-top-padding $table-cell-left-right-padding $table-header-bottom-padding
            $table-cell-left-right-padding;
        white-space: nowrap;
        background-color: var(--white);
        border-top: $table-border;
        border-bottom: $table-border;

        &.admin-sort {
            cursor: pointer;

            .admin-sort-icon {
                display: inline-flex;

                .tables-sort {
                    width: 7px;
                    height: 12px;
                    margin-left: 5px;
                    vertical-align: -2px;
                    fill: var(--grey-60);

                    .asc-arrow,
                    .desc-arrow {
                        cursor: pointer;
                        opacity: 0.3;

                        &:hover {
                            opacity: 0.6;
                        }
                    }
                }
            }

            &.admin-sort-descending .admin-sort-icon .desc-arrow {
                opacity: 1;
            }

            &.admin-sort-ascending .admin-sort-icon .asc-arrow {
                opacity: 1;
            }

            &:hover {
                background-color: var(--grey-20);
            }
        }
    }

    thead.mod-no-border-top th {
        border-top: none;
    }

    tbody.table-loading {
        opacity: 0.3;
    }

    tr {
        position: relative;
        height: $table-row-height;
        font-size: $table-row-font-size;
        line-height: $table-row-line-height;

        &.disabled div.wrapper {
            opacity: 0.4;
        }

        &:not(.no-hover, .collapsible-row, .empty):hover {
            background-color: var(--grey-20);

            td {
                background-color: var(--grey-20);
            }
        }

        &.empty td {
            padding: 25px;
            text-align: center;
        }

        &.selected:not(.no-selection-indicator) {
            &:not(:hover) {
                background-color: var(--grey-20);

                td {
                    background-color: var(--grey-20);
                }
            }

            td:first-child::before {
                @extend %selection-indicator;
            }
        }

        &.blankslate-rows:hover {
            background-color: var(--white);

            td {
                background-color: var(--white);
            }
        }

        &.row-disabled {
            td {
                color: var(--grey-60);
            }
        }
    }

    td {
        padding: $table-row-top-bottom-padding $table-cell-left-right-padding;
        color: var(--grey-100);
        text-align: left;

        &:not(.mod-no-border-bottom) {
            border-bottom: $table-border;
        }

        .mod-max-width {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &.edit.enabled {
            cursor: pointer;
        }

        .btn-icon,
        .dropdown-toggle {
            &.enabled:active:hover {
                border-radius: $border-radius;
            }

            &.disabled {
                cursor: default;
                opacity: 0.3;
            }
        }

        .checkbox-label {
            position: relative;
            top: -1px; // Small hack to make it work in all browsers...
        }

        &.table-row-collapsible-btn {
            padding: 0 $table-cell-left-right-padding;
            vertical-align: middle;
        }
    }

    &.row-selected td,
    &.row-selected:hover td {
        background-color: var(--grey-20);
    }

    &.confirm-delete {
        .row-selected td,
        &.row-selected:hover td {
            background-color: rgb(var(--deprecated-red-rgb) / $transparency-5);
            border-color: var(--critical-70);
            transition: background-color 300ms;
        }
    }

    &.mod-deleting tbody tr.selected td {
        background-color: rgb(var(--deprecated-red-rgb) / $transparency-5);
    }

    .mod-card-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        padding: $mod-card-list-vertical-padding $mod-card-list-horizontal-padding;

        & tr {
            height: unset;

            &.mod-card {
                padding: $status-card-padding;
            }
        }

        &.hidden {
            display: none;
        }

        .blankslate-row td.p0 {
            padding: 0;
        }
    }

    .mod-card-row .mod-card {
        min-height: $mod-card-row-min-height;
        border-left: $status-card-border-width solid transparent;

        .mod-card-header {
            color: var(--title-text-color);
            font-weight: var(--main-font-bold);
            font-size: $medium-title-font-size;
            border-bottom: 2px solid var(--grey-20);
        }
    }

    .mod-card {
        border-radius: $big-border-radius;
        box-shadow: 0 2px 10px rgb(var(--black-rgb) / 20%);
        cursor: pointer;

        &:hover {
            background-color: var(--deprecated-grey-2);
        }
    }

    tr.selected .mod-card {
        background-color: var(--deprecated-grey-1);
        border-left: $status-card-border-width solid var(--digital-blue-60);
    }
}

.table-layout-fixed {
    table-layout: fixed;
}

.table-last-update {
    margin: 10px $header-padding;
    color: $date-picker-button-hover-bg;
    font-size: 11px;
    text-align: right;
}

@supports ((position: sticky) or (postion: -webkit-sticky)) {
    .coveo-table-actions-container + table:not(.datepicker-table) th {
        top: $table-actions-container-height;
    }
}

.table-container {
    &.table-card {
        overflow: hidden;
        border-radius: $border-radius;
        box-shadow: $table-shadow;
    }
}

.state-icon-row {
    width: $table-state-icon-size;
    height: $table-state-icon-size;

    svg {
        width: inherit;
        height: inherit;
    }
}

$row-style: (
    success: var(--success-60),
    warning: var(--warning-70),
    error: var(--critical-70),
);

@each $style, $color in $row-style {
    .row-#{$style} {
        > td:first-child {
            color: $color;
            border-left-color: $color;

            svg {
                fill: $color;
            }
        }
    }
}