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

/// Styles related to POS/Cash register application.
@mixin os-cash-register {
	/* cash-field-width set in _textfield */

	.os-cash-register {
		/// Only for cash-area.
		$font-size-adjustment: $os-cash-zoom-factor / 4 * 3;
        $header-footer-height: make_even($v-font-size * $font-size-adjustment * 1.6);
        $caption-height: $v-unit-size * $os-cash-zoom-factor;

		@include os-button-cash;
		@include os-textfield-cash;

        /// Remove paddings around containers in POS/Cash area.
        .os-no-padding {
			padding: 0px;
			left: 0px !important;
			}

		.o-XSuggestBox {
			@include os-textfield-cash;
			@include os-textfield-suggest-mod($width-mod: 2, $cash: true);
			@include os-button-suggesttext($factor: 2);
			}

		.v-textfield, .v-datefield {
			@include os-textfield-cash;
			}

        /* local */
        /* ALSO COVERS o-XSuggestBox !! */
        @include os-textfield-mod(0.5, $primary-stylename: v-textfield\.os-span-h-half);
        @include os-textfield-mod(1, $primary-stylename: v-textfield\.os-span-h-single);
        @include os-textfield-mod(2, $primary-stylename: v-textfield\.os-span-h-double);
        @include os-textfield-mod(3, $primary-stylename: v-textfield\.os-span-h-triple);
        @include os-textfield-mod(4, $primary-stylename: v-textfield\.os-span-h-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-span-h-half {
            @include os-textfield-mod(0.5, $primary-stylename: v-textfield);
            @include os-textfield-mod(0.5, $primary-stylename: v-datefield);
            }

		.os-span-h-single {
			@include os-button-mod($width-mod: 1);
            @include os-table-mod($width-mod: 1);
            @include os-textfield-mod(1, $primary-stylename: v-textfield);
            @include os-textfield-mod(1, $primary-stylename: v-datefield);
			@include os-textarea-mod($width-mod: 1);
			}

        .os-span-h-double {
   			@include os-button-mod($width-mod: 2);
            @include os-table-mod($width-mod: 2);
            @include os-textfield-mod(2, $primary-stylename: v-textfield);
            @include os-textfield-mod(2, $primary-stylename: v-datefield);
			@include os-textarea-mod($width-mod: 2);
   			}

   		.os-span-h-triple {
			@include os-button-mod($width-mod: 3);
            @include os-table-mod($width-mod: 3);
            @include os-textfield-mod(3, $primary-stylename: v-textfield);
            @include os-textfield-mod(3, $primary-stylename: v-datefield);
            @include os-textarea-mod($width-mod: 3);
   			}

   		.os-span-h-quad {
			@include os-button-mod($width-mod: 4);
            @include os-table-mod($width-mod: 4);
            @include os-textfield-mod(4, $primary-stylename: v-textfield);
            @include os-textfield-mod(4, $primary-stylename: v-datefield);
            @include os-textarea-mod($width-mod: 4);
   			}

/*         vertical mods */
		.os-span-v-single {
            @include os-button-mod($height-mod: 1);
            @include os-table-mod($height-mod: 1, $header-footer-height: $header-footer-height);
            @include os-textarea-mod($height-mod: 1);
			}
		.os-span-v-double {
            @include os-button-mod($height-mod: 2);
            @include os-table-mod($height-mod: 2, $header-footer-height: $header-footer-height);
            @include os-textarea-mod($height-mod: 2);
			}

		.os-span-v-triple {
            @include os-button-mod($height-mod: 3);
            @include os-table-mod($height-mod: 3, $header-footer-height: $header-footer-height);
            @include os-textarea-mod($height-mod: 3);
			}

		.os-span-v-quad {
			@include os-button-mod($height-mod: 4);
            @include os-table-mod($height-mod: 4, $header-footer-height: $header-footer-height);
            @include os-textarea-mod($height-mod: 4);
			}


/* reduce actual component height when it has a caption on top (must be after other height definitions) */
/* applies to table, textarea... */
		.v-caption-on-top {
			.os-span-v-single {
             	@include os-textarea-mod ($height-mod: 1, $has-caption: 1);
				@include os-table-mod ($height-mod: 1, $has-caption: 1, $header-footer-height: $header-footer-height);
				}
			.os-span-v-double {
                @include os-textarea-mod ($height-mod: 2, $has-caption: 1);
                @include os-table-mod ($height-mod: 2, $has-caption: 1, $header-footer-height: $header-footer-height);
				}
			.os-span-v-triple {
                @include os-textarea-mod ($height-mod: 3, $has-caption: 1);
				@include os-table-mod ($height-mod: 3, $has-caption: 1, $header-footer-height: $header-footer-height);
				}
			.os-span-v-quad {
                @include os-textarea-mod ($height-mod: 4, $has-caption: 1);
				@include os-table-mod ($height-mod: 4, $has-caption: 1, $header-footer-height: $header-footer-height);
				}
			}

		.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 {
			height: $v-unit-size * $os-cash-zoom-factor - $v-layout-margin-top;
			}
		.v-caption, .v-captiontext, .v-caption-on-top > .v-caption-l-control > .v-captiontext {
			font-size: $os-font-size * $font-size-adjustment;
			line-height: $os-unit-size * $font-size-adjustment - first-number($v-border);// * $os-line-height-factor;
			}
		.v-formlayout {
			.v-caption, .v-captiontext {
				font-size: $os-font-size * $os-cash-zoom-factor;
				line-height: $os-unit-size * $os-cash-zoom-factor - first-number($v-border);// * $os-line-height-factor;
				}
			}

		.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: $os-font-size * $font-size-adjustment;
			}
		.v-table-cell-content {
			height: floor($v-unit-size * $font-size-adjustment);
			}
		}
	.os-cash-keypad {
		@include os-button-cash();
		}

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

	}