/*
  WET-BOEW
  @title: Bootstrap overrides for WET-BOEW
 */

/*
 *	Link colour and decoration
 */

%no-decoration {
	text-decoration: none;
}

a {
	text-decoration: underline;		// re-enable underlining

	&.btn {
		@extend %no-decoration;	// except for buttons
	}

	&:visited {
		color: $link-visited-color;
	}

	// make placeholder links look like plain text
	&:not([href]) {
		color: inherit;
		text-decoration: none;

		&:hover,
		&:focus {
			color: inherit;
			outline: none;
			text-decoration: none;
		}
	}
}

// do not change the visited link colour for certain elements
.btn-default:visited {
	color: $btn-default-color;
}

.btn-primary:visited {
	color: $btn-primary-color;
}

.btn-success:visited {
	color: $btn-success-color;
}

.btn-info:visited {
	color: $btn-info-color;
}

.btn-warning:visited {
	color: $btn-warning-color;
}

.btn-danger:visited {
	color: $btn-danger-color;
}

.dl-horizontal {
	@media (min-width: $screen-sm-min) {
		&.brdr-0 { // removes bordered for dl-horizontal
			dt,
			dd {
				border: 0 !important;
			}
		}

		dt {
			border-top: 1px solid $clrMedium;
			padding: 10px 10px 10px 0;
			text-align: left;
			white-space: normal;
		}

		dd {
			border-top: 1px solid $clrMedium;
			margin-bottom: 3px;
			margin-left: 160px;
			padding: 10px 10px 10px 0;
		}

		dt + dd {
			padding-bottom: 0;
		}
	}
}

.dropdown-menu {
	> {
		li {
			> {
				a {
					&:visited {
						color: $dropdown-link-color;
					}
				}
			}
		}
	}
}

.nav {
	> {
		li {
			> {
				a {
					&:visited {
						color: $link-color;
					}
				}
			}
		}
	}

	a {
		@extend %no-decoration;
	}
}

.nav-pills {
	> {
		li {
			&.active {
				> {
					a {
						&:visited {
							color: $nav-pills-active-link-hover-color;
						}
					}
				}
			}
		}
	}
}

.navbar-default {
	.navbar-nav {
		> {
			li {
				> {
					a {
						&:visited {
							color: $navbar-default-link-color;
						}
					}
				}
			}
		}
	}

	@media (max-width: $grid-float-breakpoint-max) {
		.open {
			.dropdown-menu {
				> {
					li {
						> {
							a {
								color: $navbar-default-link-color;
							}
						}
					}
				}
			}
		}
	}

	.navbar-link {
		&:visited {
			color: $navbar-default-link-color;
		}
	}
}

.navbar-inverse {
	.navbar-nav {
		> {
			li {
				> {
					a {
						&:visited {
							color: $navbar-inverse-link-color;
						}
					}
				}
			}
		}
	}

	@media (max-width: $grid-float-breakpoint-max) {
		.open {
			.dropdown-menu {
				> {
					li {
						> {
							a {
								&:visited {
									color: $navbar-inverse-link-color;
								}
							}
						}
					}
				}
			}
		}
	}

	.navbar-link {
		&:visited {
			color: $navbar-inverse-link-color;
		}
	}
}

/*
 *	Abbreviations with title attributes
 *	Workaround for abbreviations with titles using solid underlines in IE11/Edge in Bootstrap 3.4.0 (via normalize.css 4.0.1-8.0.1):
 *	- Use a dotted underline in browsers that support it (e.g. Firefox, Chrome, etc...)
 *	- Fallback on a dotted bottom border in browsers that don't support it (e.g. IE11, Edge, etc...)
 *	Source: https://github.com/necolas/normalize.css/pull/738#issuecomment-387549760
 *	Created by: @mattbrundage
 */

abbr[title] {
	border-bottom: 1px dotted;
	text-decoration: none;
}

@supports (text-decoration: underline dotted) {
	abbr[title] {
		border-bottom: 0;
		text-decoration: underline dotted;
	}
}

/*
 *	Override the design of alerts and labels
 */

%label-alert-common {
	border-radius: 0;
	border-style: solid;
	border-width: 0 0 0 4px;
}

.alert {
	@extend %label-alert-common;

	> {
		:first-child {
			margin-left: 1.2em;
			margin-top: auto;

			&:before {
				display: inline-block;
				font-family: "Glyphicons Halflings";
				margin-left: -1.3em;
				position: absolute;
			}
		}

		strong,
		em,
		span {
			&:first-child {
				display: inline-block;
			}
		}
	}
}

%label-alert-color-000 {
	color: #000;
}

%label-alert-underline {
	text-decoration: underline;
}

.label {
	@extend %label-alert-common;
}

%label-default-bg-border-left {
	background: #eee;
	border-color: #acacac;
}

.label-default {
	@extend %label-default-bg-border-left;
	@extend %label-alert-color-000;

	&[href] {
		&:hover,
		&:focus,
		&:active {
			@extend %label-default-bg-border-left;
			@extend %label-alert-color-000;
			@extend %label-alert-underline;
		}
	}
}

%label-primary-bg-border-left {
	background: #e8f2f4;
	border-color: #083c6c;
}

.label-primary {
	@extend %label-primary-bg-border-left;
	@extend %label-alert-color-000;

	&[href] {
		&:hover,
		&:focus,
		&:active {
			@extend %label-primary-bg-border-left;
			@extend %label-alert-color-000;
			@extend %label-alert-underline;
		}
	}
}

$label-alert-success-border-icon-color: #278400;

%label-alert-success-bg-border-left {
	background: #d8eeca;
	border-color: $label-alert-success-border-icon-color;
}

.label-success {
	@extend %label-alert-success-bg-border-left;
	@extend %label-alert-color-000;

	&[href] {
		&:hover,
		&:focus,
		&:active {
			@extend %label-alert-success-bg-border-left;
			@extend %label-alert-color-000;
			@extend %label-alert-underline;
		}
	}
}

.alert-success {
	@extend %label-alert-success-bg-border-left;
	@extend %label-alert-color-000;

	> {
		:first-child {
			&:before {
				color: $label-alert-success-border-icon-color;
				content: "\e084";
			}
		}
	}
}

$label-alert-info-border-icon-color: #269abc;

%label-alert-info-bg-border-left {
	background: #d7faff;
	border-color: $label-alert-info-border-icon-color;
}

.label-info {
	@extend %label-alert-info-bg-border-left;
	@extend %label-alert-color-000;

	&[href] {
		&:hover,
		&:focus,
		&:active {
			@extend %label-alert-info-bg-border-left;
			@extend %label-alert-color-000;
			@extend %label-alert-underline;
		}
	}
}

.alert-info {
	@extend %label-alert-info-bg-border-left;
	@extend %label-alert-color-000;

	> {
		:first-child {
			&:before {
				color: $label-alert-info-border-icon-color;
				content: "\e086";
			}
		}
	}
}

$label-alert-warning-border-icon-color: #f90;

%label-alert-warning-bg-border-left {
	background: #f9f4d4;
	border-color: $label-alert-warning-border-icon-color;
}

.label-warning {
	@extend %label-alert-warning-bg-border-left;
	@extend %label-alert-color-000;

	&[href] {
		&:hover,
		&:focus,
		&:active {
			@extend %label-alert-warning-bg-border-left;
			@extend %label-alert-color-000;
			@extend %label-alert-underline;
		}
	}
}

.alert-warning {
	@extend %label-alert-warning-bg-border-left;
	@extend %label-alert-color-000;

	> {
		:first-child {
			&:before {
				color: $label-alert-warning-border-icon-color;
				content: "\e107";
			}
		}
	}
}

$label-alert-danger-border-icon-color: #d3080c;

%label-alert-danger-bg-border-left {
	background: #f3e9e8;
	border-color: $label-alert-danger-border-icon-color;
}

.label-danger {
	@extend %label-alert-danger-bg-border-left;
	@extend %label-alert-color-000;

	&[href] {
		&:hover,
		&:focus,
		&:active {
			@extend %label-alert-danger-bg-border-left;
			@extend %label-alert-color-000;
			@extend %label-alert-underline;
		}
	}
}

.alert-danger {
	@extend %label-alert-danger-bg-border-left;
	@extend %label-alert-color-000;

	> {
		:first-child {
			&:before {
				color: $label-alert-danger-border-icon-color;
				content: "\e101";
			}
		}
	}
}

/*
 *	Heading top margins
 */

%font-weight-700 {
	font-weight: 700;
}

%h1-h2-margin-top {
	margin-top: ceil($line-height-computed * $font-scale-xxl);
}

h1,
.h1 {
	@extend %font-weight-700;
	@extend %h1-h2-margin-top;
}

h2,
.h2 {
	@extend %font-weight-700;
	@extend %h1-h2-margin-top;
}

h3,
.h3 {
	@extend %font-weight-700;
	margin-top: ceil($line-height-computed * $font-scale-xl);
}

h4,
.h4 {
	@extend %font-weight-700;
	margin-top: ceil($line-height-computed * $font-scale-lg);
}

h5,
.h5 {
	@extend %font-weight-700;
	margin-top: $line-height-computed;
}

h6,
.h6 {
	@extend %font-weight-700;
	margin-top: ceil($line-height-computed * $font-scale-sm);
}

/*
 * Code
 */
code {
	white-space: normal;
}

/*
 * Adding space for definition list items
 */
dt {
	margin-bottom: 3px;
}

dd {
	margin-bottom: 15px;
}

/*
 *	Firefox-safe line height on input[type="reset|button|submit"]
 */
$input-height-xs: (floor($font-size-small * $line-height-small) + ($padding-xs-vertical * 2) + 2);

input {
	&[type="reset"],
	&[type="button"],
	&[type="submit"] {
		height: $input-height-base;

		&.btn-lg,
		&.input-lg {
			height: $input-height-large;
		}

		&.btn-sm,
		&.input-sm {
			height: $input-height-small;
		}

		&.btn-xs {
			height: $input-height-xs;
		}
	}
}

/*
 *	Blockquote font size
 */
blockquote {
	font-size: $font-size-base;
}

/*
 *	Form control width
 *
 *	Default should be representative of the expected length of input.
 *	Full width should be only for cases when the expected length of input is
 *	greater than the available width.
 *  height:37px; rule of Bootstrap was overwritten by height: auto; first
 *  then a min-height specified, in order to address the issue #8492. July 2019.
 */
input[type=button], input[type=reset], input[type=submit] {
	height: auto;
	min-height: 37px;
}
.form-control {
	height: auto;
	max-width: 100%;
	min-height: 37px;
	width: auto;
}

/*
 *	Fieldset/legend border position
 *
 *	Bootstrap puts the border below the legend which creates a visual
 *	separation between the legend and the fields to which it relates. Putting
 *	the border above eliminates that visual separation. Putting it on the
 *	fieldset element instead ensures that all fieldsets will have a separation
 *	even when no legend is used.
 */
legend {
	border-bottom: 0;
	float: left;
}

%border-style-solid {
	border-style: solid;
}

fieldset {
	border-top: 1px solid $legend-border-color;
	padding-top: 10px;

	&:first-child {
		border-top: 0;
	}

	&[disabled] {
		.btn {
			@extend %border-style-solid;
		}
	}

	/*
	 *  Allows fieldSet/legend to have a bottom border under legend title
	 *	https://github.com/wet-boew/wet-boew/issues/7766
	 */
	&.legend-brdr-bttm {
		border-top: 0;

		legend {
			border-bottom: 1px solid $legend-border-color;
			float: none;
			margin-bottom: 10px;
		}
	}

	/*
	 *	Fieldset/legend as a label for a group of checkboxes or radio buttons
	 *	https://github.com/wet-boew/wet-boew/issues/5797
	 */
	&.chkbxrdio-grp {
		border-top: 0;
		padding-top: 0;

		legend {
			font-size: $font-size-base;
			font-weight: bold;
			margin-bottom: 5px;
		}
	}
}

/*
 *	Pagination
 *	  * Add left/right arrows to previous/next buttons
 *	  * Increase size of the pagination buttons
 *	  * Prevent contrast ratio issues on active placeholder links
 */
%glyphicon-inline-icons {
	content: " ";
	font-family: "Glyphicons Halflings";
	font-weight: 400;
	line-height: 1em;
	position: relative;
	top: .1em;
}

%pagination-left-arrow {
	@extend %glyphicon-inline-icons;
	content: "\e091";
	margin-right: .5em;
}

%pagination-right-arrow {
	@extend %glyphicon-inline-icons;
	content: "\e092";
	margin-left: .5em;
}

.pagination,
.pager {
	&.disabled {
		@extend %global-display-none;
	}

	> li {
		> {
			a {
				cursor: pointer;
				display: inline-block;
				margin-bottom: .5em;
				padding: $padding-large-vertical $padding-large-horizontal;
			}
		}

		&:first-child {
			[rel="prev"] {
				&:before {
					@extend %pagination-left-arrow;
				}
			}
		}

		&:last-child {
			[rel="next"] {
				&:after {
					@extend %pagination-right-arrow;
				}
			}
		}

		&.active {
			> {
				a {
					cursor: default;
				}
			}
		}

		&.disabled {
			@extend %global-display-none;

			+ {
				li {
					> {
						a {
							@include border-left-radius($border-radius-base);
						}
					}
				}
			}
		}
	}
}

.pager {
	> {
		li {
			> {
				a {
					text-decoration: none;
				}

				a,
				span {
					&:hover,
					&:focus {
						border-color: $pagination-hover-border;
						color: $pagination-hover-color;
					}
				}
			}
		}
	}
}

.pagination {
	> {
		.active {
			color: $pagination-active-color;
		}
	}
}


/*
 *	Use button border style 'outset' to give buttons depth, except when disabled
 */
.btn {
	border-style: outset;

	/*
	 * These two property overrides should be recommended upstream to
	 * Bootstrap as a fix for button wrapping (see wet-boew/wet-boew#4454)
	 */
	height: auto;
	min-height: 36px;
	min-width: 36px;
	white-space: normal;

	&.disabled,
	&[disabled] {
		@extend %border-style-solid;
	}
}


/*
 * btn-xs should be equal to btn-sm in >v4.0.*
*/
.btn-group-xs .btn,
.btn.btn-xs {
	min-height: 0;
}

/*
 *  Right-to-left support
 */
[dir=rtl] {
	.alert {
		> {
			:first-child {
				margin-left: auto;
				margin-right: 1.2em;

				&:before {
					margin-left: auto;
					margin-right: -1.3em;
				}
			}
		}
	}

	details {
		&.alert {
			padding-right: 45px;

			&:before {
				margin-right: -1.3em;
			}

			> {
				* {
					margin-right: .7em;
				}

				:first-child {
					margin-right: .4em;
				}
			}
		}
	}

	.list-unstyled {
		padding-right: 0;
	}

	.pagination,
	.pager {
		[rel="prev"] {
			@include border-left-radius(0);
			@include border-right-radius($border-radius-base);

			&:after {
				@extend %pagination-right-arrow;
			}

			&:before {
				@extend %global-display-none;
			}
		}

		[rel="next"] {
			@include border-left-radius($border-radius-base);
			@include border-right-radius(0);

			&:after {
				@extend %global-display-none;
			}

			&:before {
				@extend %pagination-left-arrow;
			}
		}

		> li {
			float: right;

			&.disabled {
				+ {
					li {
						> {
							a {
								@include border-left-radius(0);
								@include border-right-radius($border-radius-base);
							}
						}
					}
				}
			}
		}
	}
}

caption {
	color: #333;
	font: {
		size: 1.1em;
		weight: bold;
	}
	text-align: center;
}