////
/// @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{ 
			@include os-textfield-cash;
      		}
      	.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 {
/* 			width: auto; */
			.enableSuggestions { 
	 			height: $os-cash-zoom-factor * $v-unit-size - first-number($v-border); 
	 			width: $os-cash-zoom-factor * $v-unit-size; 
	 			
	 			@include os-icon-font($content: '\f08d',
									 $size: $v-font-size * $os-cash-zoom-factor,
			 				      	 $line-height: $v-unit-size * $os-cash-zoom-factor);
		 		float: right;
			 				      	 
				&.selected { 
		 			@include os-icon-font($content: '\f002',
										  $size: $v-font-size * $os-cash-zoom-factor,
			 				      	      $line-height: $v-unit-size * $os-cash-zoom-factor); 
		 			float: right; 
		 			}
				}
			}

      	/* basic textfield width */
	    @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-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-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-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-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-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-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-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-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;

				}
			.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{
					background: transparent;
					}
				}
			}

		.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;
			}
		.os-table-bigrow .v-table-cell-content {
		/* TODO find better factor */
			$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;
			}

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

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

	}