////
/// @group layout/cash-register
////

/// Styles related to POS/Cash register application. To receive these styles, components need to be placed inside a global layout with style name "os-cash-register". 
@mixin os-cash-register {
	/* cash-field-width set in _textfield */
	.os-cash-register {
        @if $font-size-adjustment < 1 { $font-size-adjustment: 1; }

		
		/* font-size in anything not affected by font-size-adjustment (?) 
		   stuff that would get too small depending on $os-cash-zoom-factor    
		*/
		.v-gridlayout-slot, .v-slot-l-control {
			$font: $v-font-size;
			@if $os-cash-zoom-factor < $v-scaling-factor--huge {$font: $v-font-size * $v-scaling-factor--huge; }
			@if $os-cash-zoom-factor < $v-scaling-factor--large {$font: $v-font-size * $v-scaling-factor--large; }
			@if $os-cash-zoom-factor <= 1 {$font: $v-font-size;}
			line-height: $font;
			}


        $header-footer-height: make_even($v-font-size * $font-size-adjustment * 1.6);
        $caption-height: $v-unit-size * $os-cash-zoom-factor;
		
        /* Remove paddings around containers in POS/Cash area. */ 
		.v-verticallayout, .v-horizontallayout, .v-gridlayout {
			padding: 0px;
			left: 0px !important;
			&.os-no-spacing >.v-spacing {
				height: 0px;
				}
			@include os-context-group;
			}

		@include os-button-cash;

		
		/* basic textfield size */
		.v-textfield, .v-datefield ,.o-XSuggestBox, .v-filterselect, .v-filterselect-input, .v-filterselect [class*="input"] { 
			@include os-textfield-cash;
      		}
      	.v-datefield [class*="textfield"] {
/*           padding-left: $unit-size * 1.2;  VALO DEFAULT */
             padding-left: $v-unit-size * $os-cash-zoom-factor * 1.2;
          	 }
          	 
        .v-filterselect-button, .v-datefield button {
            width:  $cash-button-base-height + $half-spacing;
            &:before {
                width:  $cash-button-base-height + $half-spacing;
                }
        	}
        	

        /* should accomplish that groups of fields fill the entire width of a formlayout row */
        .os-alt-button > .v-component-group, .os-alt-button > .l-beansearchfield {
            display: block;
            > .v-slot > .v-button {
                position: relative;
                height: $cash-button-base-height;
                width: $cash-button-base-height;
                min-width: $cash-button-base-height;                
                top: -1 * $cash-button-base-height;
                left: -1 * $cash-button-base-height;
                }
            }        	
        	
        .v-component-group > .v-slot > .v-button {
            height: $cash-button-base-height + $half-spacing;
            }
            
                    
      	.v-textarea {
  			font-size: $v-font-size * $os-cash-zoom-factor; 
			&.v-disabled, &.v-disabled > .v-textfield { 
				@include os-textfield-readonly;
				opacity: 0.75;
				}
			}
      	.v-textarea.os-monospace {
      		font-size: $v-font-size * $os-cash-zoom-factor;
      		}
      	
		.o-XSuggestBox {
            @include o-XSuggestBox-mod($os-cash-zoom-factor);
			}

      	/* basic textfield width and  o-XSuggestBox */
	    @include os-textfield-mod($width-mod: 1);
        @include os-textfield-mod($width-mod: 1);


        /* local */
        /* ALSO COVERS o-XSuggestBox !! */
        @include os-textfield-mod($width-mod: 0.5,$secondary-stylename: os-span-h-half);
        @include os-textfield-mod($width-mod: 1,  $secondary-stylename: os-span-h-single);
        @include os-textfield-mod($width-mod: 2,  $secondary-stylename: os-span-h-double);
        @include os-textfield-mod($width-mod: 3,  $secondary-stylename: os-span-h-triple);
        @include os-textfield-mod($width-mod: 4,  $secondary-stylename: os-span-h-quad);
        

        /* single button styles */
        @include os-button-mod($width-mod: 1, $primary-stylename: v-button\.os-span-h-single);
		@include os-button-mod($width-mod: 1.5, $primary-stylename: v-button\.os-span-h-odd);
		@include os-button-mod($width-mod: 2, $primary-stylename: v-button\.os-span-h-double);
		@include os-button-mod($width-mod: 3, $primary-stylename: v-button\.os-span-h-triple);
		@include os-button-mod($width-mod: 4, $primary-stylename: v-button\.os-span-h-quad);
		@include os-button-mod($height-mod: 1, $primary-stylename: v-button\.os-span-v-single);
		@include os-button-mod($height-mod: 2, $primary-stylename: v-button\.os-span-v-double);
		@include os-button-mod($height-mod: 3, $primary-stylename: v-button\.os-span-v-triple);
		@include os-button-mod($height-mod: 4, $primary-stylename: v-button\.os-span-v-quad);

        
/* Height and width modifications for all components (table, textfield, button, textarea...)
         to put components in a grid-like size relation to each other. */

/*         horizontal mods */
        .os-field-h-half {
            @include os-textfield-mod($width-mod: 0.5);
            }
                         
		.os-button-h-single {
			@include os-button-mod($width-mod: 1);
            }         
        .os-table-h-single, .v-table.os-span-h-single {
            @include os-table-mod($width-mod: 1);
            &.os-table-h-extend {
                @include os-table-mod($width-mod: 1, $modify: 1);
                }
            &.os-table-h-reduce {
                @include os-table-mod($width-mod: 1, $modify: -1);
                }
        	}
        
        .os-button-h-odd {
        	@include os-button-mod($width-mod: 1.5);
        	}
        
		.os-field-h-double {
            @include os-textfield-mod($width-mod:2);
            @include os-textarea-mod($width-mod: 2);
            }
        .os-table-h-double, .v-table.os-span-h-double {
            @include os-table-mod($width-mod: 2);
            &.os-table-h-extend {
                @include os-table-mod($width-mod: 2, $modify: 1);
                }
            &.os-table-h-reduce {
                @include os-table-mod($width-mod: 2, $modify: -1);
                }            
            }
        .os-button-h-double {
            @include os-button-mod($width-mod: 2);
            }
            
        .os-field-h-triple {
            @include os-textfield-mod($width-mod: 3);
            @include os-textarea-mod($width-mod: 3);
            }
        .os-table-h-triple, .v-table.os-span-h-triple {
            @include os-table-mod($width-mod: 3);
            &.os-table-h-extend {
                @include os-table-mod($width-mod: 3, $modify: 1);
                }
            &.os-table-h-reduce {
                @include os-table-mod($width-mod: 3, $modify: -1);
                }                 
            }
        .os-button-h-triple {
            @include os-button-mod($width-mod: 3);
            }
            
        .os-field-h-quad {
            @include os-textfield-mod($width-mod: 4);
            @include os-textarea-mod($width-mod: 4);
            }
        .os-table-h-quad, .v-table.os-span-h-quad {
            @include os-table-mod($width-mod: 4);
            &.os-table-h-extend {
                @include os-table-mod($width-mod: 4, $modify: 1);
                }
            &.os-table-h-reduce {
                @include os-table-mod($width-mod: 4, $modify: -1);
                }               
            }
        .os-button-h-quad {
            @include os-button-mod($width-mod: 4);
            }

/*         vertical mods */
		.os-field-v-single {
            @include os-textarea-mod($height-mod: 1);
            }
        .os-table-frame-v-single {
/*             @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $layout-level: 1); */
            }     
		.os-table-v-single, .os-span-v-single { 
            @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height);
            }		
		/* reduce actual component height when it has a caption on top (must be after other height definitions) */
		/* applies to table, textarea... */     
		.os-table-v-single .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-single {
			@include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height);
            }
        .os-button-v-single {
        	@include os-button-mod($height-mod: 1);
        	}

        .os-field-v-double {
            @include os-textarea-mod($height-mod: 2);
            .v-caption-on-top {
               	@include os-textarea-mod ($height-mod: 2, $has-caption: 1);
				}
            }
        .os-table-frame-v-double {
/*             @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $layout-level: 1); */
            }
		.os-table-v-double, .os-span-v-double {
            @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height);
			}
		.os-table-v-double .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-double {
            @include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height);
            }
        
		.os-button-v-double {
            @include os-button-mod($height-mod: 2);
            }

        .os-field-v-triple {
            @include os-textarea-mod($height-mod: 3);
            .v-caption-on-top {
               	@include os-textarea-mod ($height-mod: 3, $has-caption: 1);
				}
            }
        .os-table-frame-v-triple {
/*             @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $layout-level: 1); */
            }                 
		.os-table-v-triple, .os-span-v-triple {
            @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height);
			}
		.os-table-v-triple .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-triple {
            @include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height);
            }
            
		.os-button-v-triple {
            @include os-button-mod($height-mod: 3);
            }

        .os-field-v-quad {
            @include os-textarea-mod($height-mod: 4);
            .v-caption-on-top {
               	@include os-textarea-mod ($height-mod: 4, $has-caption: 1);
				}
            }
        .os-table-frame-v-quad {
/*             @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $layout-level: 1); */
            }                
		.os-table-v-quad, .os-span-v-quad {
            @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height);
			}
		.os-table-v-quad .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-quad {
            @include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height);
            }
            
		.os-button-v-quad {
            @include os-button-mod($height-mod: 4);
            }


		.os-cash-total, .os-cash-xl {	
			.v-textfield, .v-caption {
				font-weight: bold;
				}
			.v-captiontext {
				font-weight: normal;
				}
			.v-formlayout > table {
				width: 100%;
				}
			.v-textfield {
				@include os-textfield-cash-total;
			    text-align: right;
				}
			.v-formlayout-row>.v-formlayout-captioncell>.v-caption {
				height: $v-unit-size * (1.5 * $os-cash-zoom-factor) - first-number($v-border) !important;
				line-height: $v-unit-size * (1.5 * $os-cash-zoom-factor);
				}

			.os-span-h-half .v-textfield {
				width: $cash-field-width / 2;
				}

			.v-button {
				@include os-button-mod($col-1: #4caf6a);
				&.v-disabled {
					}
				}
			}
		

		.v-caption-on-top > .v-caption {
			@if $os-cash-zoom-factor != 1 {
				$caption-padd: make_even($v-unit-size * 0.5);
				height: $v-unit-size * $os-cash-zoom-factor - $caption-padd;
				padding-top: $caption-padd;				
				padding-bottom: 0px; 
				}
			@else {
				padding-top: 0px;
				}
			}
		.v-caption, .v-captiontext, .v-caption-on-top > .v-caption-l-control > .v-captiontext {
			font-size: $v-font-size * $font-size-adjustment;
			line-height: $v-unit-size * $font-size-adjustment - first-number($v-border);
			}
		.v-formlayout {
			.v-caption, .v-captiontext {
				font-size: $v-font-size * $os-cash-zoom-factor;
				line-height: $v-unit-size * $os-cash-zoom-factor - first-number($v-border);
				}
			}

		.v-table-header-wrap, .v-table-caption-container, .v-table-sort-indicator, .v-table-resizer {
/* 			table header height specified (also overwrites height-definition in _dialog)  */
			height: $header-footer-height;
/* 			line-height: $v-font-size * $font-size-adjustment * 1.6; */
			font-size: $v-font-size * $font-size-adjustment;
			}
		.v-table-cell-content {
/* 			height: floor($v-unit-size * $font-size-adjustment) * 3; */
			height: floor($v-unit-size * $font-size-adjustment);
			font-size: $v-font-size * $font-size-adjustment;
			}
			
        
        /* OLD */
/*         .os-row-odd .v-table-cell-content { */
/*         	@include os-row-mod($rows-in-one: 1.5);		 */
/*             } */
/* 		.os-row-double .v-table-cell-content { */
/*             @include os-row-mod($rows-in-one: 2); */
/* 		    } */
/*         .os-table-bigrow .v-table-cell-content, .os-row-triple .v-table-cell-content { */
/*             @include os-row-mod($rows-in-one: 3);  */
/*             } */
		
		/* NEW */
        .os-row-odd .v-table-cell-content {
            @include os-row-mod($rows-in-one: 2, $font-adjust: 1.5);        
            }
        .os-row-double .v-table-cell-content {
            @include os-row-mod($rows-in-one: 2.5, $font-adjust: 2);
            }
        .os-row-triple .v-table-cell-content {
            @include os-row-mod($rows-in-one: 3.5, $font-adjust: 3); 
            }
        .os-table-bigrow .v-table-cell-content {
            $rows-in-one: 3;
            $bigrow-factor: $rows-in-one/2.25;
            
            height: floor($v-unit-size * $bigrow-factor) * $rows-in-one; 
            font-size: $v-font-size * $font-size-adjustment * $bigrow-factor; 
            }
		
		
		/* LINE BREAK IN TABLE CELLS 
		.v-table-cell-wrapper {
			white-space: normal;
			}*/
		
		/* fixed width font */
		.os-monospace {
			font-family: monospace;
			}
			

/*
        /// sets spacer width for os-table-frame-* workaround
        .v-slot-os-table-frame-v-single, .v-slot-os-table-frame-v-double,  
        .v-slot-os-table-frame-v-triple, .v-slot-os-table-frame-v-quad { 
            + .v-spacing {
                width: 0px;
                }
            }

*/      

		/* some spacers */
		.os-spacer-top    { @include os-spacer(top, 1); }
		.os-spacer-left   { @include os-spacer(left, 1); }
		.os-spacer-right  { @include os-spacer(right, 1); }
		.os-spacer-bottom { @include os-spacer(bottom, 1); }
		.os-spacer-top-double    { @include os-spacer(top, 2); }
		.os-spacer-left-double   { @include os-spacer(left, 2); }
		.os-spacer-right-double  { @include os-spacer(right, 2); }
		.os-spacer-bottom-double { @include os-spacer(bottom, 2); }
		.os-spacer-top-triple    { @include os-spacer(top, 3); }
		.os-spacer-left-triple   { @include os-spacer(left, 3); }
		.os-spacer-right-triple  { @include os-spacer(right, 3); }
		.os-spacer-bottom-triple { @include os-spacer(bottom, 3); }
		.os-spacer-top-quad    { @include os-spacer(top, 4); }
		.os-spacer-left-quad   { @include os-spacer(left, 4); }
		.os-spacer-right-quad  { @include os-spacer(right, 4); }
		.os-spacer-bottom-quad { @include os-spacer(bottom, 4); }
		

        /// Styles related to the external cash display (800x600). 
        /// Zoom can be set seperately by using $os-cash-display-zoom-factor in _variables                  
        &.os-cash-display {
            .os-cash-total, .os-cash-xl {
                .v-formlayout-captioncell {
                    vertical-align: inherit;
                    }
                .v-textfield {
                    @include os-textfield-cash-total($os-cash-display-zoom-factor);
                    width: $cash-display-field-width;
                    }
                .v-caption {
                    $cap-slightly-smaller: make_even($os-cash-display-zoom-factor * 0.25); 
                    @include os-textfield-cash-total($cap-slightly-smaller);
                    min-width: $cash-display-field-width;
/*                     line-height: $v-unit-size * (1.5 * $os-cash-display-zoom-factor); */
                    }
                }
    
    /* Height and width modifications for all components (table, textfield, button, textarea...)
             to put components in a grid-like size relation to each other. */
    
    /*         horizontal mods */
            .os-table-h-single, .v-table.os-span-h-single {
                @include os-table-mod($width-mod: 1, $external-display: 1);
                &.os-table-h-extend {
                    @include os-table-mod($width-mod: 1, $modify: 1, $external-display: 1 );
                    }
                &.os-table-h-reduce {
                    @include os-table-mod($width-mod: 1, $modify: -1, $external-display: 1);
                    }
                }
            .os-table-h-double, .v-table.os-span-h-double {
                @include os-table-mod($width-mod: 2, $external-display: 1);
                &.os-table-h-extend {
                    @include os-table-mod($width-mod: 2, $modify: 1, $external-display: 1);
                    }
                &.os-table-h-reduce {
                    @include os-table-mod($width-mod: 2, $modify: -1, $external-display: 1);
                    }            
                }
            .os-table-h-triple, .v-table.os-span-h-triple {
                @include os-table-mod($width-mod: 3, $external-display: 1);
                &.os-table-h-extend {
                    @include os-table-mod($width-mod: 3, $modify: 1, $external-display: 1);
                    }
                &.os-table-h-reduce {
                    @include os-table-mod($width-mod: 3, $modify: -1, $external-display: 1);
                    }                 
                }
            .os-table-h-quad, .v-table.os-span-h-quad {
                @include os-table-mod($width-mod: 4, $external-display: 1);
                &.os-table-h-extend {
                    @include os-table-mod($width-mod: 4, $modify: 1, $external-display: 1);
                    }
                &.os-table-h-reduce {
                    @include os-table-mod($width-mod: 4, $modify: -1, $external-display: 1);
                    }               
                }
                
/*             vertical mods */
            .os-table-frame-v-single {
                @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                }     
            .os-table-v-single, .os-span-v-single { 
                @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                }       
/*             reduce actual component height when it has a caption on top (must be after other height definitions) 
               applies to table, textarea...      */
            .os-table-v-single .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-single {
                @include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                }
                
            .os-table-frame-v-double {
                @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                }
            .os-table-v-double, .os-span-v-double {
                @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height, $external-display: 1);
                }
            .os-table-v-double .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-double {
                @include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                }

            .os-table-frame-v-triple {
                @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                }                 
            .os-table-v-triple, .os-span-v-triple {
                @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height, $external-display: 1);
                }
            .os-table-v-triple .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-triple {
                @include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                }

            .os-table-frame-v-quad {
                @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $layout-level: 1, $external-display: 1);
                }                
            .os-table-v-quad, .os-span-v-quad {
                @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height, $external-display: 1);
                }
            .os-table-v-quad .v-caption-on-top, .v-caption-on-top .v-table.os-span-v-quad {
                @include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height, $external-display: 1);
                }                
            }
        }
        
	/// This should make popup content appear larger than in other views, but it doesn't work because
	/// suggesttext popup containers are rendered outside of osbp's main container and therefore
	/// outside of os-cash-register. As it can't be put into context, these popups can only be styled globally for now.
	.o-SuggestBoxPopup {
		//@include os-popup-suggest(2);
		}

	}