////
/// @group layout/table
////

/// Styling for table components.
@mixin os-table {
	.v-table {
		.v-label>img {
			@if $os-img-size-override == true {
			   border-radius: $v-unit-size *0.5;
			   max-height: $v-unit-size;
			   }
			}
		img.v-icon {
			@if $os-img-size-override == true {
	       		max-height: $v-unit-size;
	   	       	}
    		}
    	// 0 2px 3px rgba(0, 0, 0, 0.15)
		}
	
	.v-table-table {
		//color: valo-font-color($v-app-background-color);
		td {
			border-top: 0px;
			}
		}
	
	.v-table-body-wrapper {
		border: 0px;
		}
	.v-table-body {
		background-color: $os-color-contrast;
		}
		
	.v-table-cell-wrapper > .v-widget {
		margin: inherit; // affects row height
		}
			
	.v-table-header {
		font-size: $v-font-size;
		
		.v-icon {
			display: none;
			}
		}
		
	.v-table-header-wrap {
		border: 0px;
		//background-image: none !important;
		//background-color: $v-app-background-color;
		//color: valo-font-color($v-app-background-color);
		font-weight: bold;
		border-top: $v-border;
		border-bottom: $v-border;
		
/* 		.v-table-column-selector { */
/* 			border: 0px; */
/* 			width: auto !important; */
/* 			right: 1px; */
			
/* 			@include os-icon-font($content: '\f0c9', */
/* 								  $float: right);	 */
/* 			} */
		}
	.v-align-right > .v-table-cell-wrapper {
		text-align: right !important;
		}
		
	.v-align-center >.v-table-cell-wrapper {
		text-align: center !important;
		}
	
	.v-align-left > .v-table-cell-wrapper {
		text-align: left !important;
		}

	[class*="rowheader"] {
		background-color: rgba($v-focus-color, 0.1); 
		}
	
	/* FILTER */	
	.filters-wrap {
		overflow: hidden;
		background-color: $os-textfield-shade;
		height: $v-unit-size;
		div {
			height: $v-unit-size;
			}
		}
					
	.filters-panel {
		width: 90000px;
		overflow: hidden;
		line-height: $v-line-height;
		color: valo-font-color($os-light-contrast);
		font-style: italic;
		
		> div, 	> span,  > input {
			float: left !important;
			}
			
		.v.label,  .filterplaceholder {
			height: $v-unit-size -  first($v-border); //first list element
			border-bottom: $v-border;
			}
			
		.v-textfield {
			@include os-textfield-filterspanel;
			}
			
		.datefilterpopup, .numberfilterpopup  {
			> .v-button {
				@include os-button-filterspanel;
				}
			}
		}
	}
	

	
	
/// @param {number} $header-footer-height 0 if no header or footer
@mixin os-table-mod($height-mod: 0, $width-mod: 0, $has-caption: 0, $header-footer-height: 0, $layout-level: 0, $modify: 0) {
    @if $width-mod > 0 {
        /// adds or removes one button-width to table-width for more flexibility
	    @if $modify == 1 {
	        $modify: $cash-field-width/2 + $half-spacing ;
	        }
	    @if $modify == -1 {
	        $modify: ($cash-field-width/2 + make_even($v-layout-spacing-vertical * 1.5) )* -1;
	        }
    
        .v-table-body-wrapper.v-scrollable, .v-table-header-wrap {
            width: $modify;
            width: $width-mod * (($cash-field-width * 1.5) + ($v-layout-spacing-horizontal * ($width-mod * 0.5))) + $modify !important;
            }
        &.v-table.v-widget {
        	/* table: needed for proper scrollbar display when width is fixed */
          	width: auto !important;
       	    /// overlapping scrollbar workaround (unused)
            .v-table-table tr > .v-table-cell-content:last-child >.v-table-cell-wrapper {
/*                 right: 0px !important;                 */
                }    
          	
     	  	}
        }
        
    /// Borders expand table height and need to be subtracted. Currently one border in table header and one in table body. 
    /// @todo Did I cover all borders ($os-bordered versions)?
    @if $height-mod > 0 and $layout-level == 0 {
        @if $has-caption == 1 {
            .v-table-body-wrapper.v-scrollable {
            	/* some number checks 
            	height: $v-layout-spacing-vertical;
            	height: $half-spacing;
            	height: $cash-button-base-height;
            	height: make_even($v-layout-spacing-vertical);
            	height: $cash-field-height;
            	height: $v-unit-size * $os-cash-zoom-factor;
            	height: ($header-footer-height);
				height: (($height-mod - 1) * $v-layout-spacing-vertical);
				height: 2*first-number($v-border); 
				*/ 
            
                height: $height-mod * $cash-field-height - ($v-unit-size * $os-cash-zoom-factor) - ($header-footer-height) + (($height-mod - 1) * $v-layout-spacing-vertical) - 2*first-number($v-border) !important;
                }
            }
        @else {
            .v-table-body-wrapper.v-scrollable {
                height: $height-mod * $cash-field-height - ($header-footer-height) + (($height-mod - 1) * $v-layout-spacing-vertical) !important;
                overflow-y: auto !important;
                }
            .v-table-body-wrapper.v-scrollable  > div {
                
                }
            }            
        &.v-table.v-widget {
        	/* table: needed for proper scrollbar display when height is fixed */
          	height: auto !important;
          	
          	/// overlapping scrollbar workaround
          	.v-table-table tbody {
          	     }
/*             .v-table-table tr > .v-table-cell-content:last-child >.v-table-cell-wrapper { */
/*                 position: relative; */
/*                 right: 20px;    scrollbar width */
/*                 }      */
        	}
        }
        
    @if $height-mod > 0 and $layout-level == 1 {
        height: $height-mod * $cash-field-height + (($height-mod - 1) * $v-layout-spacing-vertical) !important;        
        //  2 * 266 - (64) + (1 * 10)  
        
        .v-table-body-wrapper, .v-table-body-wrapper >div {
             height: auto !Important; 
            }

        }
    }