/* extends .v-textfield */
////
/// @group components/textfield
////


/// Basic textfield style.
@mixin os-textfield {
	background-color: $os-textfield-shade;
	border-top: transparent;
	border-left: transparent;
	border-right: transparent;
	/*position: relative !important;*/
	&:focus{
		background-color: $os-focus-color;
		color: valo-font-color($os-focus-color);
		}
	&:hover{
		border-bottom-color: $v-focus-color;
		}
	}

/// Basic textfield style, readonly.
@mixin os-textfield-readonly {
	background-color: transparent;
	}

/// Textfield style modifier.
@mixin os-textfield-gridview {
	width: calc(100% + ($v-grid-cell-padding-horizontal*5));
	margin-left: $v-grid-cell-padding-horizontal * -1;
	}

/// Textfield style modifier.
@mixin os-error-textfield {
	/*background:  repeating-linear-gradient(
		 135deg,  $os-focus-color,   $os-focus-color 10px,  $os-light-contrast 10px,  $os-light-contrast 20px );
    border-color: first-color($v-border) !important;
	*/
    color: $v-error-indicator-color;
    border-bottom-style: dashed;
	}

/// Textfield style modifier.
@mixin os-textfield-filterspanel {
	text-align: center;
	white-space: normal;
	color: valo-font-color($os-textfield-shade);
	background-color: $os-textfield-shade;
	border-right-width: 0px;
	border-top-width: 0px;
	border-left: $v-border;
	border-left-color: $v-app-background-color;

	/* Erstes Element
	&:nth-child(1) {
		border-left-color: transparent;
		}*/

	&:focus, .v-textfield-focus  {
		background-color: $os-focus-color;
		color: valo-font-color($os-focus-color);
		border-right-width: 0px;
		border-top-width: 0px;
		border-left: $v-border;
		border-left-color: $v-app-background-color;
		border-bottom-color: $v-focus-color;
		}
	}

/// Textfield style modifier.
@mixin os-textfield-login {
	height: $v-unit-size * 1.5;
	//background-color: $v-app-background-color;
	background-color: $os-color-contrast;
	//border: 1px;
	margin-bottom: ceil($v-unit-size /5);
	border-radius: floor($v-unit-size/5);
		&:focus{
		background-color: $os-focus-color;
		}
	&:hover{
		border-color: $v-focus-color;
		}
	}


/// Textfield style modifier.
@mixin os-textfield-cash {
	font-size: $v-font-size * $os-cash-zoom-factor;
	height: $v-unit-size * $os-cash-zoom-factor;
/* 	width: $cash-field-width; // set below to differentiate between suggest and normal textfield */ 
	&.v-disabled, &.v-disabled > .v-textfield { 
		@include os-textfield-readonly;
		opacity: 0.75;
		}
	}

/// Textfield style modifier.
@mixin os-textfield-cash-total {
	font-size: $v-font-size * ($os-cash-zoom-factor * 1.5) !important;
	height: $v-unit-size * ($os-cash-zoom-factor * 1.5) !important;
	text-align: right;
/* 	width: auto; */
	}


/* for cash register */
/// Textfield style modifier for arranging vertically aligned textfields (with caption on top) according to their width and spacings.
/// @param {integer} field-width-factor
@mixin os-textfield-mod ($width-mod: 1, $secondary-stylename: null){	
	
	@if $secondary-stylename == null {
		/* textfield, datefield etc. dimensions according to container stylename */
	    .v-textfield, .v-datefield, .o-XSuggestBox { 
	        width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1));
	        }			
	    .o-XSuggestBox > .v-textfield, .o-XSuggestBox > .v-datefield{
	        width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1)) - ($v-unit-size * $os-cash-zoom-factor) !important;
	        }		
		}
	
	@else {
		/* textfield, datefield etc. dimensions according to local stylename */
	    .#{$secondary-stylename}.v-textfield, .#{$secondary-stylename}.v-datefield, .#{$secondary-stylename}.o-XSuggestBox { 
	        width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1));
	        }
	    .#{$secondary-stylename}.o-XSuggestBox > .v-textfield, .#{$secondary-stylename}.o-XSuggestBox > .v-datefield {
	        width: ($cash-field-width * $width-mod) + ($v-layout-spacing-horizontal * ($width-mod - 1)) - ($v-unit-size * $os-cash-zoom-factor) !important;
	        }		
		}		
	}
	

@mixin os-textarea-mod ($height-mod: 0, $width-mod: 0, $has-caption: false) {
    @if $height-mod > 0 {
        @if $has-caption == true {
            .v-textarea, &.v-textarea {
                height: $height-mod * $cash-field-height - ($v-unit-size * $os-cash-zoom-factor) + (($height-mod - 1) * $v-layout-spacing-vertical);
                }
            }
        @else {
            .v-textarea, &.v-textarea {
                height: $height-mod * $cash-field-height + (($height-mod - 1) * $v-layout-spacing-vertical);
                }
            }
        }
    @if $width-mod > 0 {
    	.v-textarea, &.v-textarea {
    		width: $width-mod * $cash-field-width + ($v-layout-spacing-horizontal * ($width-mod - 1));
    		}
    	}
    }