@import "./common";

// Common 
@mixin sorting-icon {
    @media screen and (max-width: 768px) {
        .sorting.sorting.sorting::after {
            margin-right: 8px;
        }
    }
}

@mixin mobile-tablet-table($border-radius) {
    @media screen and (max-width: 768px) {
        thead {
            th:first-child {
                border-radius: $border-radius $border-radius 0 0;
                border-right: none;
            }

            th:last-child {
                border-radius: 0;
                border-left: none;
            }
        }

        tbody {
            tr:last-child {
                td:first-child {
                    border-radius: 0;
                }

                td:last-child {
                    border-radius: 0 0 $border-radius $border-radius;
                }
            }
        }
    }
}

// End 

// Default style new implemented
.gswpts_default-style.gswpts_default-style {

    th.thead-item.expanded_style {
        text-align: left;
    }

    th,
    td {
        border: none;
        border-bottom: 2px solid #e0e5f6;
    }

    table.ui.celled.display {
        border: none;
    }

    .sorting.sorting.sorting::after {
        color: #acacac;
    }

    &.collapse_style {
        @include sorting-icon;
    }

    // NEW add 
    // fix forcefully editor end table issues 
    table.dataTable.row-border tbody th,
    table.dataTable.row-border tbody td,
    table.dataTable.display tbody th,
    table.dataTable.display tbody td {
        border-top: unset !important;
    }

    // .gswpts_default-style.gswpts_default-style tbody td:nth-child(1) {
    tbody td:nth-child(1) {
        color: #333333;
    }

    tbody td:not(:first-child) {
        color: #6B7280;
    }

}


// Style 1 
.gswpts_style-1.gswpts_style-1 {
    table {
        background: white;
    }

    thead th {
        background: #6807f9;
        color: #fff;
    }

    td {
        color: #000;
    }

    th.thead-item.expanded_style {
        text-align: left;
    }

    th,
    td {
        border: none;
        border-bottom: 2px solid #e0e5f6;
    }

    tbody {
        td:nth-child(odd) {
            background: #e8ebf8;
        }

        td:nth-child(even) {
            background: #fff;
        }
    }

    .sorting.sorting.sorting::after {
        color: #fff;
    }

    &.collapse_style {
        @include sorting-icon;
    }
}

// Style 2
.gswpts_style-2.gswpts_style-2 {
    $border-radius: 10px;

    table {
        border-collapse: separate;

        th {
            background: #36304a;
            color: #fff;
            border-top: none;
            border-left: none;
            border-right: none;
            text-align: left;
        }

        th:first-child {
            border-radius: $border-radius 0 0 0;
            border-right: none;
        }

        th:last-child {
            border-radius: 0 $border-radius 0 0;
            border-left: none;
        }

        tr:last-child td:first-child {
            border-radius: 0 0 0 $border-radius;
        }

        tr:last-child td:last-child {
            border-radius: 0 0 $border-radius 0;
        }

        td:first-child {
            border-right: none;
        }

        td:last-child {
            border-left: none;
        }

        td:not(:first-child, :last-child) {
            border-left: none;
            border-right: none;
        }

        td {
            border-top: none;
            border-bottom: none;
            border-left: 0.5px solid #fff;
            border-right: 0.5px solid #fff;
        }

        tr:nth-child(even)>td {
            background-color: #f5f5f5;
        }

        tr:nth-child(odd)>td {
            background-color: #fff;
        }

        tbody {
            tr:nth-child(odd):hover td {
                background-color: #f5f5f5;
            }
        }
    }

    table.ui.celled.display {
        border: none;
    }

    .sorting.sorting.sorting::after {
        color: #fff;
    }

    &.collapse_style {
        @include sorting-icon;

        @include mobile-tablet-table($border-radius);
    }
}

// Style 3
.gswpts_style-3.gswpts_style-3 {
    $border-radius: 10px;

    table {
        border-collapse: separate;

        td,
        th {
            border: none;
            outline: none;
        }

        th {
            background-color: #6c7ae0;
            color: #fff;
            border-top: none;
        }

        //header text to left 
        th.thead-item.expanded_style {
            text-align: left;
        }

        th:first-child {
            border-radius: $border-radius 0 0 0;
            border-right: none;
        }

        th:last-child {
            border-radius: 0 $border-radius 0 0;
            border-left: none;
        }

        tr:last-child td:first-child {
            border-radius: 0 0 0 $border-radius;
        }

        tr:last-child td:last-child {
            border-radius: 0 0 $border-radius 0;
        }

        td:first-child {
            border-right: none;
        }

        td:last-child {
            border-left: none;
        }

        td:not(:first-child, :last-child) {
            border-left: none;
            border-right: none;
        }

        th,
        td {
            border-top: none;
            border-bottom: none;
        }

        tr:nth-child(even) td {
            background-color: #f8f6ff;
        }

        tr:nth-child(odd) td {
            background-color: #fff;
        }
    }

    // outer border remove 
    table.ui.celled.display {
        border: none;
    }

    .sorting.sorting.sorting::after {
        color: #fff;
    }

    &.collapse_style {
        @include sorting-icon;

        @include mobile-tablet-table($border-radius);
    }
}

// Style 4
.gswpts_style-4.gswpts_style-4 {
    table {

        thead th,
        // Only header 
        tbody tr td {
            background-color: #333333;
            color: white;
            border: none;

        }

        // Full body 
        tbody tr td {
            background-color: #4F4F4F;
        }

        th.thead-item.expanded_style {
            text-align: left;
        }

        thead th {
            border: none;
        }

        thead,
        tbody {
            tr:hover {

                td,
                th {
                    background-color: #504949;
                }
            }
        }

        a {
            color: orange;

            &:hover {
                color: #2ecc40;
            }
        }

        .sorting.sorting.sorting::after {
            color: #fff;
        }
    }

    &.collapse_style {
        @include sorting-icon;
    }
}

// Style 5 

.gswpts_style-5.gswpts_style-5 {
    $border-radius: 12px;

    table {
        border-collapse: separate;

        td,
        th {
            border: 1px solid rgba(229, 231, 235, 1);
        }

        th.thead-item.expanded_style {
            text-align: left;
        }


        thead th {
            text-transform: uppercase;
            background: rgba(249, 250, 251, 1);
            color: #000;
        }

        td {
            border-top: none;
            background-color: #fff;
        }

        td:first-child,
        th:first-child {
            border-right: none;
        }

        td:last-child,
        th:last-child {
            border-left: none;
        }

        th:not(:first-child, :last-child) {
            border-right: none;
            border-left: none;
        }

        td:not(:first-child, :last-child) {
            border-top: none;
            border-right: none;
            border-left: none;
        }

        thead th:first-child {
            border-radius: $border-radius 0 0 0;
        }

        thead th:last-child {
            border-radius: 0 $border-radius 0 0;
        }

        tr:last-child td:first-child {
            border-radius: 0 0 0 $border-radius;
        }

        tr:last-child td:last-child {
            border-radius: 0 0 $border-radius 0;
        }
    }

    // outer border remove
    table.ui.celled.display {
        border: none;
    }

    .sorting.sorting.sorting::after {
        color: #000;
    }

    &.collapse_style {
        @include sorting-icon;

        @include mobile-tablet-table($border-radius);

        @media screen and (max-width: 768px) {

            th,
            td {
                border-left: 1px solid rgba(229, 231, 235, 1) !important;
                border-right: 1px solid rgba(229, 231, 235, 1) !important;
            }
        }
    }
}