/* wc.debug.debugInfo.scss */
@import 'mixins_common.scss';
@import 'wc.ui.dialog_vars.scss';

$wc-color-debug-fade-bg: #e6f2ff;
$wc-color-debug-infobox-bg: #fff9e4;
$wc-color-debug-infobox-border: 'orange';
$wc-color-debug-crumb-bg: #f3f3f3;

// idSelector required the debug container element is a generated single artefact with a fixed id.
// scss-lint:disable IdSelector, VendorPrefix
#wcdebugcontainer {
	max-width: 100%;
	min-height: 7em;
	min-width: 15em;
	position: fixed;
	width: 40em;
	z-index: 100;

	&.wc_db_showing {
		-webkit-animation: debug-fade-in 1s;
		animation: debug-fade-in 1s;
	}

	> header,
	> footer {
		background-color: $wc-ui-color-dialog-head-bg;
		color: $wc-ui-color-dialog-head-fg;
	}

	> header {
		padding: 0.25em 0.5em;

		> h1 {
			color: $wc-ui-color-dialog-head-fg;
			font-size: 1em;
			margin: 0;
			padding: 0.25em 0.5em;
		}

		> span { // the control 'block'
			position: absolute;
			right: 0.25em;
			top: 0.5em;
		}
	}

	> [aria-live] {
		@include border();
		background-color: $wc-ui-color-global-bg;
		color: $wc-ui-color-global-fg;
		height: 100%;
		overflow: auto;
		padding: 0.5em;
	}

	> footer {
		line-height: 0;
		text-align: right;
	}

	&.wc_dragflow,
	 &.wc_resizeflow { // move and resize animations
		transition-delay: 0s;
		transition-duration: 1s;
		transition-timing-function: ease-in-out;
	}

	&.wc_dragflow {
		transition-property: left, top;

		&.wc_resizeflow {
			transition-property: left, top, height, width;
		}
	}

	&.wc_resizeflow {
		transition-property: height, width;
	}
}
// The element currently having its debug info exposed
.wc_db_active {
	-webkit-animation: debugactivefade 3s infinite alternate;
	animation: debugactivefade 3s infinite alternate;
	background-color: $wc-color-debug-fade-bg;
	// important to clean up other more specific rules - transient debug rules should always win.
	// scss-lint:disable ImportantRule
	background-image: none !important;
	color: $wc-ui-color-global-fg !important;
}


// the instruction box
.wc_db_message {
	@include border($color: $wc-color-debug-infobox-border, $width: 2px);
	background-color: $wc-color-debug-infobox-bg;
	padding: 0.5em;
	position: fixed;
	right: 0;
	top: 0;
	width: 250px;
}

.wc_dialog_close:focus,
.wc_dialog_close:hover {
	background-position: 100% 0;
}

.wc_db_crumbs {
	@include border;
	background-color: $wc-color-debug-crumb-bg;
	list-style-type: none;
	margin: 0;
	padding: $hgap-normal;

	li {
		display: inline-block;
		width: auto;

		+ li:before {
			content: '> ';
			margin-left: $hgap-small;
		}
	}

	+ div {
		bottom: 0;
		height: 1.334em;
		left: 0;
		position: absolute;
		width: 100%;
	}
}

@mixin debug-color-fade {
	from {background-color: $wc-color-debug-fade-bg;}
	to {background-color: $wc-color-debug-crumb-bg;}
}


@mixin debug-fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}


@-webkit-keyframes debug-fade-in {
	@include debug-fade-in;
}

@keyframes debug-fade-in{
	@include debug-fade-in;
}

@-webkit-keyframes debugactivefade {
	@include debug-color-fade;
}

@keyframes debugactivefade{
	@include debug-color-fade;
}
/* end wc.debug.debugInfo.scss */
