@import "./variables.module"; 

@include responsivePseudoElementChangeColor;


.datatable {
	font-size: 13px;
	tr{
		th,td {
			vertical-align: middle;
			text-align: left;
			padding: 10px 10px;						
		}
		td.dtr-control {			
			pointer-events: none;	//during debugging, toggle this to off.
		}
		
	}

	/*num of cols to hide from reverse*/

    @include media-breakpoint-down(sm) { 

        tr:not(.child-row){
            td, th{
					&:nth-child(n + #{$less-than-small + 1}){
						display: none;
						
					}
					&:nth-child(#{$less-than-small}){						
						padding-right: 0; /*special case of smalleer iphone 5/SE screens 320px. stops from overflowing*/
					}					
            }
			td.dtr-control {
				&::before{
					@include responsivePseudoElementBaseAttributes;
					
				}
			
			}
        }


        
    }
	@include media-breakpoint-between(sm, md) { 

		tr:not(.child-row){
			td, th{
				&:nth-child(n+ #{$small-to-mid + 1}){
					display: none;
					// :export {
					// 	hiddenColumnCount: $small-to-mid;
					// }
				}				
			}
			td.dtr-control {
					&::before{
						@include responsivePseudoElementBaseAttributes;
					}
				
			}
		}

	}
	
	
	@include media-breakpoint-down(lg) { 
		tr:not(.child-row){
			td, th{
				&:nth-child(n+ #{$mid-to-large + 1} ){
					display: none;					
					// :export {
					// 	hiddenColumnCount: $mid-to-large;
					// }
				}
			}
			td.dtr-control {
					&::before{
						@include responsivePseudoElementBaseAttributes;
					}
			}
		}
	}
}

.scroll-bound{
	max-height: 55vh;
}