////
/// @group components/group
////


@mixin os-group-color($col) {			

	$bgcol: mix($col, $v-app-background-color, 70);
	$txcol: valo-font-color($bgcol);
	$bgcol-dim: mix($col, $v-app-background-color, 30);
	$txcol-dim: valo-font-color($bgcol-dim);
		
	background-color: $bgcol-dim;
	color: $txcol-dim;
	border-radius:	$v-border-radius;

    @if $os-cash-no-shadow == 1 {
        @include box-shadow(none);
        }
    @else {   
        @include box-shadow(2px 1px 7px rgba(0,0,0,0.35));
        }
	.v-textfield.v-disabled {
		color: $txcol-dim;
		}
	&.os-focus {
		background-color: $bgcol;
		color: $txcol;
		.v-textfield.v-disabled {
			color: $txcol;
			}
		}
	}

/// Color backdrop for "layout" areas. Only used in POS/Cash register so far.
@mixin os-context-group {
	&.os-group { 
		&.os-color-1  { @include os-group-color($os-color-1);  }
		&.os-color-2  { @include os-group-color($os-color-2);  }
		&.os-color-3  { @include os-group-color($os-color-3);  }
		&.os-color-4  { @include os-group-color($os-color-4);  }
		&.os-color-5  { @include os-group-color($os-color-5);  }
		&.os-color-6  { @include os-group-color($os-color-6);  }
		&.os-color-7  { @include os-group-color($os-color-7);  }
		&.os-color-8  { @include os-group-color($os-color-8);  }
		&.os-color-9  { @include os-group-color($os-color-9);  }
		&.os-color-10 { @include os-group-color($os-color-10); }
		&.os-color-11 { @include os-group-color($os-color-11); }
		&.os-color-12 { @include os-group-color($os-color-12); }
		&.os-color-13 { @include os-group-color($os-color-13); }
		&.os-color-14 { @include os-group-color($os-color-14); }
		}
	&.os-no-underline {
	  	.v-textfield.v-disabled {
	  		border: transparent;
	  		}
		}
	}