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

/// Focus style for formlayout captions.
@mixin os-caption-focus {
	color: $v-focus-color;
	border-bottom-color: $v-focus-color; 
	}
	
/// Focus style for panel borders.
/// @todo does this work?
@mixin os-panel-focus ($tab){
/*     border-color: $v-focus-color; */
/*     border-width: 1px; */
/*     border: 1px inset green; */
/*     box-sizing: border-box; */
    
    & >.v-panel-content:after {
/*         @if ($tab == 1) { */
/* 	        box-shadow: inset 0px 0px 1px 1px $v-focus-color; */
/*             } */
/*         @else { */
            box-shadow: inset 0px 0px 2px 2px $v-focus-color;
/*             } */
	     content: '';
		 display: block;
		 height: 100%;
		 pointer-events: none;
		 position: absolute;
		 top: 0;
		 width: 100%;
		 z-index: 99;
	    }
    
	}

/// @todo something's missing here...
@mixin test {
	/* --- TESTS bzgl. HAS FOCUS ... */
	.v-panel-os-has-focus .v-panel-captionwrap {
		background-color: yellow !important;
		}
	.v-panel-os-has-focus .v-panel-caption span {
		background-color: yellow !important;
		color: red !important;
		}
	.v-textfield-os-has-focus {
		color: red !important;
		}
	.v-customcomponent-os-has-focus {
		color: red !important;
		}
	.v-filterselect-os-has-focus {
		color: red !important;
		}
	.v-checkbox-os-has-focus {
		color: red !important;
		}
	.v-datefield-os-has-focus {
		color: red !important;
		}
	.v-caption-os-has-focus {
		background-color: yellow !important;
		color: red !important;
		}
	.v-button-os-has-focus {
		background-color: yellow !important;
		color: red !important;
		}
	}