// @package Default Template V7 for SobiPro multi-directory component with content construction support

// @author
// Authors: Sigrid Suski & Radek Suski, Sigsiu.NET GmbH
// Url: https://www.Sigsiu.NET

// @copyright Copyright (C) 2006 - 2024 Sigsiu.NET GmbH (https://www.sigsiu.net). All rights reserved.
// @license GNU/GPL Version 3
// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License version 3
// as published by the Free Software Foundation, and under the additional terms according to section 7 of GPL v3.
// See https://www.gnu.org/licenses/gpl.html and https://www.sigsiu.net/licenses.

// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

// @modified 17 April 2024 by Sigrid Suski

// Helper file for Bootstrap styles

// Background for modal windows (outside SobiPro container)
// ----------------------------------------
body.modal-open {
	overflow: inherit; //otherwise the screen moves on modals
}

.modal-backdrop.show,
.modal-backdrop.fade.in {
	opacity: 0.5;
}

.modal-backdrop {
	background-color: @alpha-color !important;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	opacity: 0;
}

.modal-footer .btn + .btn {
	margin-left: 5px;
	margin-bottom: 0;
}

.fade {
	transition: opacity .15s linear;
}

// Naked alert (Joomla 3)
.alert.alert- {
	background-color: @gamma-color;
	color: @gamma-text-color;
	border-color: @gamma-color;
	border-radius: @corner-radius;
	text-shadow: none;

	h4, h3 {
		margin: 0;
		font-size: calc(@font-size + .0625rem);
		line-height: calc(@font-size + .0625rem + .125rem);
		font-weight: normal;
		padding-bottom: 0;
		color: @gamma-text-color;
	}

	.close {
		position: relative;
		top: 0;
		line-height: 1.125rem;
		cursor: pointer;
		color: white;
		right: -21px;
		opacity: .4;
	}
}

.SobiPro.default7 {

	// Re-set the corner radius
	// -----------------------------------------------
	.modal,
	.modal-content,
	.alert,
	.label,
	.form-control,
	.dropdown-menu,
	.bootstrap-datetimepicker-widget td,
	.bootstrap-datetimepicker-widget th,
	.bootstrap-datetimepicker-widget td span,
	.bootstrap-tagsinput,
	.navbar,
	.navbar-toggler,
	.uneditable-input {
		border-radius: @corner-radius;
	}

	& when (@bs > 2) {
		// round at left side
		.btn-group > .btn:first-of-type:not(.btn-sm) {
			border-bottom-left-radius: @corner-radius;
			border-top-left-radius: @corner-radius;
		}

		.btn-group > .btn:first-of-type.btn-sm {
			border-bottom-left-radius: @corner-radius-small;
			border-top-left-radius: @corner-radius-small;
		}

		// exception for btn-group in btn-group
		.btn-group > .btn-group:not(:first-child) .btn {
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}

		// round at right side
		.btn-group > .btn:last-child:not(.btn-sm),
		.btn-group > .dropdown-toggle {
			border-top-right-radius: @corner-radius;
			border-bottom-right-radius: @corner-radius;
		}

		.btn-group > .btn:last-child.btn-sm,
		.btn-group > .dropdown-toggle.btn-sm {
			border-top-right-radius: @corner-radius-small;
			border-bottom-right-radius: @corner-radius-small;
		}
	}

	// Text and background
	// ----------------------------------------
	.textColor(alpha, @alpha-color);
	.textColor(beta, @beta-color);
	.textColor(gamma, @gamma-color);
	.textColor(delta, @delta-color);

	.bg {
		border-radius: @corner-radius-small;
		-webkit-border-radius: @corner-radius-small;
		-moz-border-radius: @corner-radius-small;
		padding: .125rem .32rem;
	}

	a [class*="bg-"],
	[class*="bg-"] {
		i, span, a {
			text-shadow: none;
		}
	}

	a [class*="bg-outline"],
	[class*="bg-outline"] {
		border: .0625rem solid;
	}

	.bgColor(alpha, @alpha-color);
	.bgColor(beta, @beta-color);
	.bgColor(gamma, @gamma-color);
	.bgColor(delta, @delta-color);

	.borderColor(alpha, @alpha-color);
	.borderColor(beta, @beta-color);
	.borderColor(gamma, @gamma-color);
	.borderColor(delta, @delta-color);

	// Button
	// ----------------------------------------
	.btn {
		font-size: @font-size;
		border-radius: @corner-radius;
		background-image: none;

		&:focus {
			outline: .125rem solid @outline-color;
		}

		&.active,
		&:active {
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		&.btn-sm {
			font-size: calc(@font-size - .2rem);
		}
	}

	:not(.btn-group):not(.btn-group-vertical) > .btn.btn-sm {
		border-radius: @corner-radius-small;
	}

	.buttonColor(alpha, @alpha-color);
	.buttonColor(beta, @beta-color);
	.buttonColor(gamma, @gamma-color);
	.buttonColor(delta, @delta-color);
	.buttonOutlineColor(alpha, @alpha-color);
	.buttonOutlineColor(beta, @beta-color);
	.buttonOutlineColor(gamma, @gamma-color);
	.buttonOutlineColor(delta, @delta-color);

	.uneditable-input {
		font-size: @font-size;

		&:focus {
			border-color: fade(@alpha-color, 80%) !important;
			box-shadow: 0 .0625rem .0625rem rgba(0, 0, 0, 0.075) inset, 0 0 .5rem rgba(red(@alpha-color), green(@alpha-color), blue(@alpha-color), 60%);

			border-style: solid;
			border-width: .0625rem;
		}
	}

	// Toggle editor button
	// ----------------------------------------
	.toggle-editor {
		margin-top: .5rem !important;

		// the icon on the edit toggle button; probably coded wrong
		.icon-eye {
			display: none;
		}

		.btn {
			.btn-alpha;
			background-image: none;
			text-decoration: none;
			margin-top: .25rem;
			-ms-flex-pack: end !important;
			justify-content: flex-end !important;
		}
	}

	// Dropdowns
	// -----------------------------------------------
	.dropdown-menu {
		font-size: @font-size;
		text-align: left;
	}

	.dropDownColor(alpha, @alpha-color);
	.dropDownColor(beta, @beta-color);
	.dropDownColor(gamma, @gamma-color);
	.dropDownColor(delta, @delta-color);

	// Modal windows
	// -----------------------------------------
	.modal-header {
		h3 {
			font-size: calc(@font-size + .5rem);
			color: @alpha-color;
		}
	}

	// Help Block, Description in entry form
	// -----------------------------------------------
	.help-block {
		font-size: calc(@font-size - .0625rem);

		&.above {
			margin-top: 0;
		}

		&.below {
			margin-bottom: 0;
		}

		&.administrative {
			color: @error-color !important;
			font-size: 80%;
		}

		p {
			margin-bottom: .5rem;
		}

		.alert {
			margin-top: .3rem;
			margin-bottom: 0;
		}
	}

	// Alerts and error messages
	// ----------------------------------------
	.alert {
		font-size: @font-size;

		h4 {
			font-size: calc(@font-size + .125rem);
		}

		hr {
			margin-top: .5rem;
			margin-bottom: .7rem;
		}

		.alertColor(alpha, @alpha-color);
		.alertColor(beta, @beta-color);
		.alertColor(gamma, @gamma-color);
		.alertColor(delta, @delta-color);

		.alertOutlineColor(alpha, @alpha-color);
		.alertOutlineColor(beta, @beta-color);
		.alertOutlineColor(gamma, @gamma-color);
		.alertOutlineColor(delta, @delta-color);

		//simulate default alert-danger, used by SobiPro apps instead of alert-message
		&.alert-error {
			color: @error-color;
			background-color: #f2dede;
			border-color: #ebccd1;
		}

		// Looks as a normal text (removal of the message design)
		&.alert-normal {
			padding: .625rem 0 .625rem 0;
			font-size: calc(@font-size + .0625rem);
			color: @text-color;
			background-color: @back-color;
			border: none;
			border-color: @back-color;
		}
	}

	// List groups
	// ------------------------
	.listGroupColor(alpha, @alpha-color);
	.listGroupColor(beta, @beta-color);
	.listGroupColor(gamma, @gamma-color);
	.listGroupColor(delta, @delta-color);

	// Error styles
	// -----------------------------------------------
	.text-error,
	.form-group.error {
		.checkbox,
		.radio,
		input,
		select,
		textarea,
		.control-label,
		.help-block,
		.help-inline {
			color: @error-color;
		}

		input:focus,
		select:focus,
		textarea:focus {
			border-color: fade(@error-color, 80%) !important;
			box-shadow: 0 .0625rem .0625rem rgba(0, 0, 0, 0.075) inset, 0 0 .375rem rgba(red(@error-color), green(@error-color), blue(@error-color), 60%);
		}

		input,
		select,
		textarea {
			border-color: @error-color;
		}
	}

	// Pagination
	// -----------------------------------------------
	& when (@bs > 2) {
		.pagination {
			flex-wrap: nowrap;

			// base colours
			.page-link {
				color: @link-color;
				text-decoration: none;
				background-color: @white;
				border: 1px solid tint(@link-color, 50%);
			}

			a.page-link:hover,
			a.page-link:focus,
			&.active > .page-link {
				text-decoration: none;
				.setBackground(@link-color);

				color: @text-color-opposite;
			}

			&.disabled > .page-link {
				.setBackground(screen(@link-color, @object-colour-13));
			}

			// base borders
			&:not(.pagination-round):not(.sp-alpha) {
				li.page-item:last-child .page-link {
					border-top-right-radius: @corner-radius;
					border-bottom-right-radius: @corner-radius;
				}

				li.page-item:first-child .page-link {
					border-top-left-radius: @corner-radius;
					border-bottom-left-radius: @corner-radius;
				}
			}

			// base borders large
			&.pagination-lg:not(.pagination-round):not(.sp-alpha) {
				li.page-item:last-child .page-link {
					border-top-right-radius: calc(@corner-radius + .2rem);
					border-bottom-right-radius: calc(@corner-radius + .2rem);
				}

				li.page-item:first-child .page-link {
					border-top-left-radius: calc(@corner-radius + .2rem);
					border-bottom-left-radius: calc(@corner-radius + .2rem);
				}
			}

			// base borders small
			&.pagination-sm:not(.pagination-round):not(.sp-alpha) {
				li.page-item:last-child .page-link {
					border-top-right-radius: calc(@corner-radius - .2rem);
					border-bottom-right-radius: calc(@corner-radius - .2rem);
				}

				li.page-item:first-child .page-link {
					border-top-left-radius: calc(@corner-radius - .2rem);
					border-bottom-left-radius: calc(@corner-radius - .2rem);
				}
			}


			// Round items
			&.pagination-round {
				@circle-size: .5rem;
				flex-wrap: wrap;
				margin: 0 .1rem .1rem .1rem;

				li.page-item {
					& when (@bs = 5) {
						line-height: calc(@font-size + @circle-size);
					}

					margin-right: inherit;

					.page-link {
						& when (@bs < 5) {
							line-height: calc(@font-size + @circle-size);
						}

						margin-left: .0625rem;
						border-radius: 50%;
						width: calc(@font-size + @circle-size);
						padding: .2rem;
						font-size: calc(@font-size - .1875rem);
						text-align: center;

						-webkit-box-sizing: unset;
						-moz-box-sizing: unset;
						box-sizing: unset;
					}
				}

				&.pagination-lg {
					@circle-size: 1rem;

					li.page-item {
						& when (@bs = 5) {
							line-height: calc(@font-size + @circle-size);
						}
					}

					.page-link {
						& when (@bs < 5) {
							line-height: calc(@font-size + @circle-size);
						}

						margin-left: .0825rem;
						width: calc(@font-size + @circle-size);
						padding: .4rem;
						font-size: @font-size;
					}
				}

				&.pagination-sm {
					@circle-size: .25rem;

					li.page-item {
						& when (@bs = 5) {
							line-height: calc(@font-size + @circle-size);
						}
					}

					.page-link {
						& when (@bs < 5) {
							line-height: calc(@font-size + @circle-size);
						}

						margin-left: .05rem;
						width: calc(@font-size + @circle-size);
						padding: .1rem;
						font-size: calc(@font-size - .21rem);
					}
				}
			}

			// Alpha index
			&.sp-alpha {
				@circle-size: .35rem;
				margin: 0 .1rem .1rem .1rem;

				li.page-item {
					& when (@bs = 5) {
						line-height: calc(@font-size + @circle-size);
					}

					.page-link {
						& when (@bs < 5) {
							line-height: calc(@font-size + @circle-size);
						}

						margin-left: .15rem;
						border-radius: @alpha-edge;
						min-width: calc(@font-size + @circle-size);
						padding: .12rem .12rem;
						font-size: calc(@font-size - .1875rem);
						text-align: center;

						-webkit-box-sizing: unset;
						-moz-box-sizing: unset;
						box-sizing: unset;
					}
				}
			}
		}

		.paginationColor(alpha, @alpha-color, @alpha-text-color);
		.paginationColor(beta, @beta-color, @beta-text-color);
		.paginationColor(gamma, @gamma-color, @gamma-text-color);
		.paginationColor(delta, @delta-color, @delta-text-color);
	}

	// Navigation bars
	// ----------------------------------------
	.navbar {
		padding-bottom: 0;
		padding-top: 0;

		.navbar-toggle {
			border-color: @alpha-text-color;

			.fa-bars,
			.icon-bar {
				background-color: @alpha-text-color;
			}
		}

		.navbar-collapse,
		.navbar-form {
			border-color: @alpha-color;
		}

		.navbar-collapse {
			-webkit-box-shadow: none;
			box-shadow: none;
		}
	}

	// Tabs / Pills / Staples
	// ----------------------------------------
	.nav-tabs.sp-navtabs {
		> li > a {
			border-radius: @corner-radius @corner-radius 0 0;
		}
	}

	.nav-pills.sp-navtabs {
		> li > a {
			border-radius: @corner-radius;
		}

		&.staples {
			margin: 2rem 0 0 .625rem;
			// Small devices (landscape phones, less than 768px)
			@media (max-width: 767.98px) {
				margin-left: 0;
			}

			> li {
				> a {
					background-color: @alpha-medium;
					color: @text-color;
					border-bottom-color: @alpha-color;
					opacity: .5;

					line-height: 1.3125rem;
					margin: 0 0 0 .5rem;
					position: relative;
					top: -.8rem;

					// Small devices (landscape phones, less than 768px)
					@media (max-width: 767.98px) {
						border-radius: @corner-radius;
					}

					&:hover, > &:focus {
						background: none;
					}

					&.active {
						opacity: 1;
						position: relative;
						top: 1.04rem;
						border-bottom: .125rem solid;
						border-top-left-radius: 0;
						border-top-right-radius: 0;

						// side arrows
						&::before,
						&::after {
							top: -1.84rem;
							content: '';
							position: relative;
							width: 0;
							height: 0;
							border-bottom: .875rem solid #cdcdcd;

							// Small devices (landscape phones, less than 768px)
							@media (max-width: 767.98px) {
								content: unset;
								border-bottom: none;
							}
						}

						&::before {
							left: -1.63rem;
							border-left: .625rem solid transparent;
							border-right: 0 solid transparent;
						}

						&::after {
							right: -1.63rem;
							border-left: 0 solid transparent;
							border-right: .625rem solid transparent;
						}
					}
				}
			}
		}
	}

	.nav-tabs.sp-navtabs,
	.nav-pills.sp-navtabs {
		font-size: calc(@font-size + .0625rem);

		a:focus {
			outline: none;
		}
	}

	.tab-pane {
		.setBackground(@alpha-light);
		border-style: solid;
		border-width: .0625rem;
		border-radius: @corner-radius;

		padding: .625rem;
		margin-bottom: .9375rem;
		margin-top: .625rem;
		min-height: 12.5rem;

		// Extra small devices (portrait phones, less than 576px)
		@media (max-width: 575.98px) {
			min-height: unset;
		}
	}

	.tab-content {
		&.staples {
			margin-top: -1.25rem;
			padding: 0;

			.tab-pane {
				padding-top: 2.25rem;
			}

			// Small devices (landscape phones, less than 768px)
			@media (max-width: 767.98px) {
				margin-top: 0;

				.tab-pane {
					padding-top: 1.0625rem;
				}
			}
		}
	}

	.tabColor(alpha, @alpha-color);
	.tabColor(beta, @beta-color);
	.tabColor(gamma, @gamma-color);
	.tabColor(delta, @delta-color);

	// Badges
	// ------------------------
	a.badge {
		text-decoration: none;
	}

	& when not(@bs = 5) {
		.badgeColor(alpha, @alpha-color);
		.badgeColor(beta, @beta-color);
		.badgeColor(gamma, @gamma-color);
		.badgeColor(delta, @delta-color);
	}

	// Carousel Slider Settings
	// -----------------------------------------------
	.carousel {
		.carousel-inner {
			height: @carousel-image;

			.carousel-caption {
				background-color: transparent;
				color: white;
				font-weight: 600;
			}

			> .item > img,
			> .item > a > img {
				height: @carousel-image;
			}

			img.sp-carousel-image {
				margin-left: auto;
				margin-right: auto;
			}

			// Small devices (landscape phones, less than 768px)
			@media (max-width: 767.98px) {
				.carousel-inner {
					> .item {
						> img,
						> a > img {
							height: auto;
						}
					}
				}
			}
		}

		.carousel-fade {
			.carousel-control {
				z-index: 2;
			}

			.carousel-inner {
				.item {
					opacity: 0.3;
					-webkit-transition: opacity 2s ease;
					-moz-transition: opacity 2s ease;
					-o-transition: opacity 2s ease;
					transition: opacity 2s ease;
				}

				.active {
					opacity: 1;

					&.left,
					&.right {
						left: 0;
						opacity: 0;
						z-index: 1;
					}
				}

				.next.left,
				.prev.right {
					opacity: 1;
				}
			}
		}

		.carousel-indicators {
			top: auto;
			right: auto;

			li {
				float: none;
			}
		}

		.carousel-control {
			height: unset;
			margin-top: -1.25rem;
			line-height: unset;
			border: 0 solid #fff;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;

			&.right {
				background-image: linear-gradient(to right, transparent 0, rgba(red(@beta-color), green(@beta-color), blue(@beta-color), 0.5) 100%);
			}

			&.left {
				background-image: linear-gradient(to right, rgba(red(@beta-color), green(@beta-color), blue(@beta-color), 0.5) 0, transparent 100%);
			}

			// Support for Font Awesome 3 and 4
			.fa-chevron-right,
			.icon-chevron-right,
			.icon-next {
				margin-right: -.9375rem;
			}

			.fa-chevron-left,
			.fa-chevron-right,
			.icon-chevron-left,
			.icon-chevron-right,
			.icon-next,
			.icon-prev {
				width: 1.875rem;
				height: 1.875rem;
				margin-top: -.9375rem;
				font-size: calc(@font-size + 1rem);
			}

			.fa-chevron-right,
			.icon-chevron-right,
			.icon-next {
				right: 50%;
				margin-right: -.625rem;
			}

			.fa-chevron-left,
			.fa-chevron-right,
			.icon-chevron-left,
			.icon-chevron-right,
			.icon-next,
			.icon-prev {
				position: absolute;
				top: 50%;
				z-index: 5;
				display: inline-block;
				margin-top: -.625rem;
			}
		}
	}

	// Entry form
	// ----------------------------------------
	.sp-entry-edit {
		.form-group {
			margin-bottom: .8rem;
		}

		label.btn-sm {
			font-weight: normal;
			font-size: calc(@font-size - .125rem);
		}
	}
}

@import (less) "_bs@{bs}.linc";
@import (less) "_utilities.linc";
