/* ======================================================
    <!-- Table (Synthetic) -->
/* ====================================================== */
.syntable__wrapper {
    --syntable-alternant-bg: #f0f0f0;
    --syntable-dark-bg: #212529;
    --syntable-row-active-bg: #f0f8ff;
    --syntable-scrollbar-color: rgba(0, 0, 0, 0.2);
    --syntable-scrollbar-track: rgba(0, 0, 0, 0);
    --syntable-scrollbar-h: 3px;
    --syntable-scrollbar-w: 10px;
    --syntable-padding-x: 1rem;
    --syntable-padding-y: 0.5rem;
    --syntable-cell-focus-shadow: inset 0px 0px 2px 0px rgba(13, 110, 253, 2.25);
    
    &.table-responsive {
        overflow-x: auto;
        overflow-y: hidden;

        &::-webkit-scrollbar {
            height: var(--syntable-scrollbar-h);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--syntable-scrollbar-color);
        }

        &::-webkit-scrollbar-track {
            background: var(--syntable-scrollbar-track);
        }
    }


    table {
        
        td,
        th {
            position: relative;

            /* focus */
            &:focus {
                outline: none;
            }
            &.cell-focus {
                box-shadow: var(--syntable-cell-focus-shadow);
            }

        }

        tr {
            transition: 0.1s ease-in-out;
            
            &.active {
                background-color: var(--syntable-row-active-bg);
            }
        }



        &.table-colgroup {
            tbody tr td:first-child,
            tbody tr th:first-child {
                color: #fff;
            }

            col:nth-child(odd) {
                background-color: var(--syntable-alternant-bg);
            }

            col:first-child {
                background-color: var(--syntable-dark-bg);
            }

        }

        &.cell-autowidth {
            display: block;  /* Key 1 */
            width: max-content;  /* Do not use "max-width", It affects the horizontal scroll length of sticky, and if you exceed it, it will be invalid */
        }
        
    }

    .syntable__caption {
        &.syntable__caption--top {
            caption-side: top;
        }

        &.syntable__caption--bottom {
            caption-side: bottom;
        }
    }

    .sort-trigger {
        cursor: pointer;

        svg {
            transition: 0.1s ease-in-out;
            opacity: .3;
        }

        &:hover svg {
            transform: scale(1.2);
            opacity: .7;
        }
        
    }

    /*------ allow sort  ------*/
    &.allow-sort {
        .sort-trigger {
            cursor: pointer;
    
            svg {
                transition: 0.1s ease-in-out;
                opacity: .3;
            }
    
            &:hover svg {
                transform: scale(1.2);
                opacity: .7;
            }
            
        }

        /* Transition animation */
        .newsort {
            animation: table-newsort .5s linear 1 forwards;
            opacity: 0;
        }
        
        @for $i from 1 to 100 {
        
            .newsort:nth-child(#{$i+1}) {
                animation-delay: #{$i*50}ms;
            }
        }
        
        @keyframes table-newsort {
            0%   {
                opacity: 0;
                transform: translateX(10px);
            }
        
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        

    }

    
    /*------ allow drag and drop  ------*/
    &.allow-dragdrop {

        .drag-trigger {
            cursor: move;
            opacity: .5;
        }
    

        /* Specify a drag trigger point */
        tbody {

            .row-obj-clonelast {
                height: 0 !important;

             
                td {
                    border: none;
                    box-shadow: none;
                }
            }

            td,
            th {
                pointer-events: none;
                user-select: auto;
            }

            &.drag-trigger-mousedown {

                td,
                th {
                    pointer-events: auto;
                }
            }

        }

        /* placeholder */
        .row-placeholder {
            border: 2px dotted #b5ba91;
            background-color: #e4e9c3;
        }
        
        /* trigger */
        .drag-trigger {
            display: inline-block;
            pointer-events: auto;

            ~span:not(.checkbox-trigger) {
                display: inline-block;
                padding-left: calc(var(--syntable-padding-x)*1.5);
            }  
        }
    }
    
    &.allow-dragdrop.has-checkbox {
        .drag-trigger {
            ~span:not(.checkbox-trigger) {
                padding-left: calc(var(--syntable-padding-x)*3);
            }  
        }
        
        tbody .checkbox-trigger {
            padding-left: calc(var(--syntable-padding-x)*1.5);
        }

    }



}



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

    .syntable__wrapper {
        --syntable-border-color: #dee2e6;
        --syntable-per-shadow: 0 2px 4px 0 rgba(0,0,0,.1);

        /*------ Enhanced Responsive ------*/
        &.table-enhanced-responsive {

            table {

                thead {
                    display: none;
                }

                tbody {

                    tr {
                        box-shadow: var(--syntable-per-shadow);
                        margin-bottom: 1rem;
                        display: block;
                    }

                    tr:nth-of-type(even) {
                        //background-color: $table-alternant-bg;
                    }

                    
                    td,
                    th {
                        display: block;


                        &::before {
                            content: attr(data-table-text);
                            display: block;
                            float: left;
                            width: 40%;
                            font-weight: bold;
                            border-right: 1px solid var(--syntable-border-color);
                            margin-right: 0.5rem;
                        }

                        &::after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                    }

                }


            }


            table.cell-autowidth {
                display: table;  /* Key 1 */
                width: 100%;
            }
            

        }



        /*------ Enhanced Responsive with Scroll Bars ------*/
        &.table-enhanced-responsive-scrolled {

            table {
                display: block;
                width: 100%;
                border-bottom: 0 !important;
                border-left: 0 !important;
                border-right: 0 !important;
                overflow: auto;
                

                &::-webkit-scrollbar {
                    height: var(--syntable-scrollbar-h);
                    width: var(--syntable-scrollbar-w);
                }
        
                &::-webkit-scrollbar-thumb {
                    background: var(--syntable-scrollbar-color);
                }
        
                &::-webkit-scrollbar-track {
                    background: var(--syntable-scrollbar-track);
                }

                thead {
                    display: block;
                    float: left;
                    width: 100px;
                    border-bottom: 1px solid var(--syntable-border-color);

                    th {
                        display: block;

                        /* required */
                        min-width: auto !important;
                        width: auto !important;

                        &:not(:last-child) {
                            border-bottom: 0;
                        }

                    }
                }

                tbody {
                    width: calc(100% - 100px);
                    display: block;
                    float: left;
                    overflow-x: scroll;
                    border-bottom: 1px solid var(--syntable-border-color);
                    border-right: 1px solid var(--syntable-border-color);


                    &::-webkit-scrollbar {
                        height: var(--syntable-scrollbar-h);
                    }
            
                    &::-webkit-scrollbar-thumb {
                        background: var(--syntable-scrollbar-color);
                    }
            
                    &::-webkit-scrollbar-track {
                        background: var(--syntable-scrollbar-track);
                    }

                }

                thead tr,
                tbody tr {
                    display: block;
                    border-color: var(--syntable-border-color);
                }

                th,
                tbody td,
                tbody th {
                    box-sizing: border-box;
                    overflow-x: hidden;
                    overflow-y: auto;


                    &::-webkit-scrollbar {
                        width: var(--syntable-scrollbar-w);
                    }

                    &::-webkit-scrollbar-thumb {
                        background: var(--syntable-scrollbar-color);
                    }

                    &::-webkit-scrollbar-track {
                        background: var(--syntable-scrollbar-track);
                    }

                    &:first-child {
                        border-top: 0;
                    }

                    &:not(:last-child) {
                        border-bottom: 0;
                        border-right: 0;
                    }

                }


                tbody tr {
                    display: table-cell;

                }

                tbody td,
                tbody th {
                    display: block;
                }

            }


        }
    }

}