table {
    border-collapse: separate;
    border-spacing: 0;
    .ls-sticky-column {
        &:first-child {
            position         : sticky;
            background-color : $white;
            left             : 0;
            box-shadow       : inset -15px 0px 15px -15px rgba(0, 0, 0, 0.05);
        }
        &:last-child {
            position         : sticky;
            background-color : $white;
            right            : -1px; // Chrome(<109) bug forces us to use -1px because it would show a 1px gap
            box-shadow       : inset 15px 0 15px -15px rgba(0, 0, 0, 0.05);
        }
    }
    [class^="ri-"], [class*=" ri-"]  {
        vertical-align: 0;
    }
}

.table {
    > {
        thead > tr,
        tbody > tr,
        tfoot > tr, {
            &.active > {
                td, th {
                    background-color : $g-200;
                }
            }
            &.success > {
                td, th {
                    background-color : $success;
                }
            }
            &.info > {
                td, th {
                    background-color : $grape;
                }
            }
            &.warning > {
                td, th {
                    background-color : $warning;
                }
            }
            &.danger > {
                td, th {
                    background-color : $error;
                }
            }
            > {
                td, th {
                    &.active {
                        background-color : $g-200;
                    }
                    &.success {
                        background-color : $success;
                    }
                    &.info {
                        background-color : $grape;
                    }
                    &.warning {
                        background-color : $warning;
                    }
                    &.danger {
                        background-color : $error;
                    }
                }
            }
        }
    }
    tbody + tbody {
        border-top : 2px solid $g-600;
    }
    tfoot > tr > td {
        border-top : 1px solid $g-600;
    }
    thead > tr > th {
        border-bottom : 2px solid $g-600;
    }
}

.table {
    background-color : $white;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color : $g-200;
}

.table-hover > tbody > tr {
    &:hover > {
        td {
            background-color : $g-200;
        }
        td:not(.ls-sticky-column) {
            box-shadow : none;
        }
    }
    &.active:hover > {
        td, th {
            background-color : $g-200;
        }
    }
    &.success:hover > {
        td, th {
            background-color : mix($g-200, $success, percentage($table-hover-bg-factor));
        }
    }
    &.info:hover > {
        td, th {
            background-color : mix($g-200, $grape, percentage($table-hover-bg-factor));
        }
    }
    &.warning:hover > {
        td, th {
            background-color : mix($g-200, $warning, percentage($table-hover-bg-factor));
        }
    }
    &.danger:hover > {
        td, th {
            background-color : mix($g-200, $danger, percentage($table-hover-bg-factor));
        }
    }
    > {
        td, th {
            &.active:hover {
                background-color : $g-200;
            }
            &.success:hover {
                background-color : mix($g-200, $success, percentage($table-hover-bg-factor));
            }
            &.info:hover {
                background-color : mix($g-200, $grape, percentage($table-hover-bg-factor));
            }
            &.warning:hover {
                background-color : mix($g-200, $warning, percentage($table-hover-bg-factor));
            }
            &.danger:hover {
                background-color : mix($g-200, $danger, percentage($table-hover-bg-factor));
            }
        }
    }
}

/** For all grid view table */
.scrolling-wrapper {
    overflow-x: auto;
    min-height: 300px;
}

.grid-view, .grid-view-ls {
    .table {
        padding       : 20px;
        border-radius : 4px;
        border        : $table-border-color;
        .ls-sticky-column, .checkbox-column {
            //text-align : center;
            padding    : 7px 20px;
            box-shadow : none;
            z-index: 1;
        }
        thead {
            tr {
                border : 0 none $white;
                th {
                    padding-bottom : 9px;
                    font-weight    : 600;
                    vertical-align : middle;
                    border-bottom  : solid 1px $g-600;
                    .sort-link {
                        color       : $black;
                        font-weight : 600;
                        ::before {
                            font-weight : 500;
                            color       : $active-green;
                        }
                    }
                }
                th:hover .sort-link :before {
                    visibility : visible;
                }
            }
        }
        tbody {
            td input[type=checkbox]:after {
                margin-right : 0;
            }
            tr {
                border : solid 1px $g-100;
            }
        }
        button {
            border-color : $white;
            background-color: inherit;
            border: none;
        }
        button:hover,
        button:focus {
            color        : $black;
            box-shadow   : none;
            border-color : $white;
        }
        button.btn .ri-more-fill:before {
            font-size : 1.1em;
        }
    }
    .survey-state.disabled {
        opacity : 0.5;
    }
    .action-list {
        display : flex;
        color   : $black;
        a:not(:first-child) {
            margin-left: 12px;
        }
        a i::before {
          color: $grape;
        }
        .disabled i::before {
          opacity: 0.5;
          color: $g-700;
        }
        i::before {
            font-size : $font-size-base * 1.5;
        }
    }
    .grid-view-ls-footer {
        display: flex;
        justify-content: space-between;
        margin-top: $grid-gutter-width;
        flex-flow: wrap;
        .massive-action-container,
        .pagination-container,
        .summary-container {
            flex: 1 1 0

        }

    }
    .listActions,
    #responses-column-filter-button,
    .pager,
    .summary {
        margin: 4px 0;
    }
    #responses-column-filter-modal .checkbox label {
        vertical-align: text-bottom;
        white-space: nowrap;
        overflow-x: hidden;
    }

    .responses-multiselect-checkboxes {
        overflow-y: scroll;
        height: 60vh;
    }

    .responses-column-filter-modal-checkbox-buttons {
        text-align: left;
        padding-bottom: 15px;
    }
}
@media (max-width: 768px) {
  .grid-view-ls-footer {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center;
  }
}
