@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 - default-style = new name: Simple
// 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;
    }

}

// Colored Column - style-1 : new name: vertical-style
// Style 1  new name: vertical-style  PAID
.gswpts_style-1.gswpts_style-1 {
    table {
        background: white;

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

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

        // New add 
        tr:last-child td:first-child {
            border-radius: 0 0 0 10px;
        }

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

        // End 
    }

    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;
        border-bottom: 1px solid #e0e5f6;
    }

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

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

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

    &.collapse_style {
        @include sorting-icon;
    }

    // NEW add 2 
    //Fid forcefully 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: 1px solid rgb(255 255 255 / 15%) !important;
    }

    table.dataTable.no-footer {
        border-bottom: unset !important;
    }

}

// Stripped Table style-2 : new name: Minimal on dark 
// Style 2 PAID
.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;
            } */
            tr:hover td {
                background-color: #d1d1d1;
            }
        }
    }

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

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

    &.collapse_style {
        @include sorting-icon;

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

    //Fid forcefully 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: 1px solid rgb(255 255 255 / 15%) !important;
    }
}

// Hover Style - style-3: new name: minimal-elegant-style
// Style 3 PAID
.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;
        }

        tbody {
            tr:hover td {
                background-color: #EDE8FC;
            }
        }
    }


    // 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);
    }

    //Fid forcefully 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: 1px solid rgb(255 255 255 / 15%) !important;
    }
}

// Free: Dark Table - style-4 : new name: Simple on dark
// Style 4 FREE
.gswpts_style-4.gswpts_style-4.gswpts_style-4 {
    table {

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

        }

        // Full body 
        tbody tr td {
            background-color: #000;
            color: white;
        }

        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;
    }
}




// Taliwind Style - style-5 : new name: Uppercase-heading 
// Style 5 PAID

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

    table {
        border-collapse: separate;

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

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


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

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

        // New add code 
        // All column make border so below few css hide as new design add 
        td,
        th {
            border-right: 1px solid #f4f4f4;
        }

        td:last-child,
        th:last-child {
            border-right: 1px solid #d8d8d8;

        }

        // OLD used below 
        // First column 
        /* td:first-child,
        th:first-child {
            // border-right: none;
            // border-right: 1px solid #F2F2F2;
            border-right: 1px solid #e4e1e1;
        } */


        // Last column 
        /* td:last-child,
        th:last-child {
            // border-left: none;
            // border-left: 1px solid #F2F2F2;
            border-left: 1px solid #e4e1e1;

        } */

        // All othe hide border with :first-child, :last-child
        /* th:not(:first-child, :last-child) {
            border-right: none;
            border-left: none;
        }

        //  All othe hide border without  :first-child, :last-child
        td:not(:first-child, :last-child) {
            border-top: none;
            border-right: none;
            border-left: none;
        } */

        // Not used above 

        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;
            }
        }
    }

    //Fid forcefully 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: 1px solid rgb(255 255 255 / 15%) !important;
    }

}


// Minimal Table style-6 : new name: Minimal
// Minimal Style 6 PAID
.gswpts_style-6.gswpts_style-6 {
    $border-radius: 10px;

    table {
        border-collapse: separate;

        th {
            background: #E5F1FF;
            color: #0f0f0f;
            border-top: none;
            border-left: none;
            border-right: none;
            text-align: left;
        }

        // Make rounded off 
        /* 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: #EBF4FF;
        }

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

        tbody {

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

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

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

    &.collapse_style {
        @include sorting-icon;

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

    //Fid forcefully 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: 1px solid rgb(255 255 255 / 15%) !important;
    }
}


// Theme Dark Knight style gswpts_style-7
.gswpts_style-7.gswpts_style-7.gswpts_style-7 {
    $border-radius: 10px;

    table {

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

        }

        // Full body 
        tbody tr td {
            background-color: #34344C;
            color: white;
        }

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

        thead th {
            border: none;
        }

        // Rounding
        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;
        }

        // End 

        thead,
        tbody {
            tr:hover {

                td,
                th {
                    background-color: #7e78d3;
                }
            }
        }

        a {
            color: orange;

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

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

    &.collapse_style {
        @include sorting-icon;
    }

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




// Uppercase elegant style new style - style-8
.gswpts_style-8.gswpts_style-8.gswpts_style-8 {
    $border-radius: 10px;

    table {
        // fix because it conflict global fix with free spectra one support code
        border-collapse: unset;

        thead th,
        // Only header 
        tbody tr td {
            background-color: #E0E7FF;
            color: #312E81;
            border: none;

        }


        // Full body 
        tbody tr td {
            background-color: #fff;
            color: #333333;
        }

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

        // First column text 
        tbody td:first-child {
            color: #000;
        }

        // Rest text color 
        tbody td:not(:first-child) {
            color: #6b7280;
            font-weight: 400;
        }



        thead th {
            border: none;

            // Make header content uppercase
            text-transform: uppercase;
            font-weight: 600; // Make header content bold

        }

        // Rounding
        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;
        }


        // Add borders to the first and last columns
        tbody tr td:first-child {
            border-left: 2px solid #EEF2FF;
        }

        tbody tr td:last-child {
            border-right: 2px solid #EEF2FF;
        }

        // Add bottom border to the last row
        tbody tr:last-child td {
            border-bottom: 2px solid #EEF2FF;
        }


        // End 

        thead,
        tbody {
            tr:hover {

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

        a {
            color: orange;

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

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

    &.collapse_style {
        @include sorting-icon;
    }

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


// New other theme style add here