/*
	Global Provisional styling
	- Provisional  CSSspecific for view port are defined in the "views/[view port]" theme CSS
*/

/* BEGINNING OF DARK THEME */
.provisional.dark-theme .gcweb-menu button[aria-haspopup=true],
.provisional.dark-theme #wb-srch button,
.provisional.dark-theme .srchbox button {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.provisional.dark-theme .gcweb-menu button[aria-haspopup=true]:focus, .provisional.dark-theme .gcweb-menu button[aria-haspopup=true]:hover,
.provisional.dark-theme #wb-srch button:focus, .provisional.dark-theme #wb-srch button:hover,
.provisional.dark-theme .srchbox button:focus, .provisional.dark-theme .srchbox button:hover {
  background-color: #000;
  color: #fff;
}
.provisional.dark-theme .gcweb-menu, .provisional.dark-theme #wb-bnr + .gcweb-menu, .provisional.dark-theme.home .gcweb-menu, .provisional.dark-theme #wb-bnr + hr {
  border-top-color: #000;
}
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true] {
  background-color: #fff;
  border-color: #fff;
}
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true] {
  color: #000;
}
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true]:focus,
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true]:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.provisional.dark-theme #wb-info .landscape {
  background-color: #000;
  color: #fff;
}
/* END OF DARK THEME */

// Colours for the provisional alert styles
// TODO: Rename and migrate these into _variables.scss if the provisional alert styles become official in the future
$provisional-alert-danger-color: #d3080c;
$provisional-alert-warning-color: #ee7100;
$provisional-alert-info-color: #269abc;
$provisional-alert-success-color: #278400;

// Removes styling from the current WET4 Alert
%provisional-alert-first-child-before-disable {
	& {
		> {
			:first-child {
				&::before {
					color: inherit;
					content: none;
				}
			}
		}
	}
}

@mixin provisional-alert-type($color, $content) {
	border-color: $color;
	border-image: linear-gradient(to bottom, $color 16px, $color 16px, transparent 16px, transparent 48px, $color 48px, $color 48px) 1 100%;

	&::before {
		color: $color;
		content: $content;
	}
}

.provisional, .experimental {

	/* ------------
	 * Background color
	 *
	 */

	.bg-darker {
		background-color: #000;

		&.well.header-rwd h1 {
			border-bottom-color: #6f6f6f;
		}
	}

	// theme default color
	.bg-gctheme {
		background-color: #355688;

		&.well.header-rwd {
			background-color: #26374a;
		}
	}

	// PinkDay color
	.bg-pnkDy {
		background-color: #AD005F;

		&.well.header-rwd {
			background-color: #570030;
		}
	}

	/* ------------
	 * Background image for heading
	 *
	 */

	.bg-img-hdng {
		background-image: url("../assets/x-blue-line.png");
		background-position: right bottom;
		background-repeat: no-repeat;
		min-height: 60px;
		padding-bottom: 35px;
		padding-right: 80px;
	}

	/* ------------
	 * Utility
	 *
	 */

	.bg-cover, &.bg-cover {
		background-size: cover;
	}


	/* ------------
	 * Theme color
	 *
	 */

	/* Pink day - One day event in April
	 * (with a contrast conforming to Level AAA)
	 */
	&.pnkDy-theme {

		// Page header and Menu
		.gcweb-menu button[aria-haspopup=true],
		#wb-srch button,
		.srchbox button {
			background-color: #AD005F;
			border-color:#AD005F;
		}
		.gcweb-menu button[aria-haspopup=true]:focus, .gcweb-menu button[aria-haspopup=true]:hover,
		#wb-srch button:focus, #wb-srch button:hover,
		.srchbox button:focus, .srchbox button:hover {
			background-color: #570030;
			color: #fff;
		}
		.gcweb-menu,
		.home .gcweb-menu {
			border-top-color: #AD005F;
		}

		// Home page Menu
		.home .gcweb-menu {
			button[aria-haspopup=true] {
				background-color: #ffffff;
				border-color:#ffffff;
			}
			button[aria-haspopup=true] {
				color: #AD005F;
			}
			button[aria-haspopup=true]:focus,
			button[aria-haspopup=true]:hover {
				background-color: #AD005F;
				border-color:#AD005F;
				color: #ffffff;
			}
		}

		// Footer
		#wb-info .landscape {
			background-color: #AD005F;
		}
	}

	/* Dark theme
	 */
	&.dark-theme {

		// Page header and Menu
		.gcweb-menu button[aria-haspopup=true],
		#wb-srch button,
		.srchbox button {
			background-color: #000;
			border-color: #000;
			color: #fff;
		}
		.gcweb-menu button[aria-haspopup=true]:focus, .gcweb-menu button[aria-haspopup=true]:hover,
		#wb-srch button:focus, #wb-srch button:hover,
		.srchbox button:focus, .srchbox button:hover {
			background-color: #000;
			color: #fff;
		}
		.gcweb-menu,
		.home .gcweb-menu {
			border-top-color: #000;
		}

		// Home page Menu
		.home .gcweb-menu {
			button[aria-haspopup=true] {
				background-color: #fff;
				border-color:#fff;
			}
			button[aria-haspopup=true] {
				color: #000;
			}
			button[aria-haspopup=true]:focus,
			button[aria-haspopup=true]:hover {
				background-color: #000;
				border-color:#000;
				color: #fff;
			}
		}

		// Footer
		#wb-info .landscape {
			background-color: #000;
			color: #fff;
		}
	}

}

.provisional {
	//This color will eventually be replaced by the new colors from the alert revamp PR.
	&.icon-warning-light, .icon-warning-light {
		color: #DF7200;
	}

	&.alert {
		background-clip: content-box;
		background-color: inherit;
		border-left: 6px solid #000;
		margin-bottom: 23px;
		margin-left: 10px;
		padding: 0 0 0 15px;

		> {
			p, ul, ol {
				margin-bottom: 0px;
			}

			* {
				margin-left: 15px;
			}
		}

		details {
			margin-left: .5em;
			padding-top: 15px;
		}

		> {
			:first-child:not(details) {
				margin-top: auto;
				padding-top: 15px;
			}

			:last-child {
				padding-bottom: 25px;
			}
		}

		&::before {
			font-family: "Glyphicons Halflings";
			font-size: 26px;
			line-height: 2.3em;
			margin-left: -1.27em;
			padding: 2px;
			position: absolute;
		}

		> :first-child {
			margin-left: 15px;
		}
	}

	&.alert-info {
		@include provisional-alert-type($provisional-alert-info-color, "\e086");
		@extend %provisional-alert-first-child-before-disable;
	}

	&.alert-success {
		@include provisional-alert-type($provisional-alert-success-color, "\e084");
		@extend %provisional-alert-first-child-before-disable;
	}

	&.alert-warning {
		@include provisional-alert-type($provisional-alert-warning-color, "\e107");
		@extend %provisional-alert-first-child-before-disable;
	}

	&.alert-danger {
		@include provisional-alert-type($provisional-alert-danger-color, "\e101");
		@extend %provisional-alert-first-child-before-disable;
	}
}

// Provisional CSS for the chat wizard
@import "src/plugins/chatwizard/base";