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

/// Popup overlay that contains a perspective selector (at the point of styling...).
@mixin os-popup-perspective {
	.v-window-header {
		@include os-typeface-view-h2;
		.v-icon {
			padding-right: $v-unit-size * 0.3;
			}
		text-align: center;
		}
	.v-window-outerheader {
		&:after {
			border-top-width: 0px;
			}
		}
	.v-window-contents {
		padding-top: $v-line-height * $v-scaling-factor--large + $v-layout-spacing-vertical*2 !important;
		}
	.v-window-closebox {
		@include os-icon-font ( $size: $v-font-size,
								$float: right,
								$content: '\f410');
		&:before {
		    color: $v-error-indicator-color;
		    } 
		}
	.v-window-maximizebox {
		@include os-icon-font ( $size: $v-font-size,
								$float: right,
								$content: '\f2d0');					 
		}
	.v-window-restorebox {
        @include os-icon-font ($float: right,
                               $size: $v-font-size,
                               $line-height: $v-unit-size,
                               $content: '\f24d',
                               $mirror: true);
		}
    .v-window-restorebox, .v-window-closebox, .v-window-maximizebox {
        padding:  $v-layout-spacing-vertical $v-layout-spacing-vertical 0px 0px;
        }
        
	.v-window-closebox-disabled {
		display: block;
		cursor: auto;
		color: get_color_mix(valo-font-color($os-light-contrast), #fff, 50);
		}
		
	.v-table-cell-content {
		height: floor($v-unit-size * 1.3);
		}
	}

/// Notification overlay.
@mixin os-popup-notification {
	h1[class^="v-Notification"] {
		font-size: $v-font-size * $v-scaling-factor--large;
		background: none;
		border: none;
		}
	}