// @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 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.

// @created 16 February 2022 by Sigrid Suski
// @modified 17 May 2024 by Sigrid Suski

// Helper file with utility styles for default7 template when used with Bootstrap < 5

& when (@bs <= 4) {
	@media (min-width: 576px) {
		.me-sm-1 {
			margin-right: .25rem !important;
		}

		.me-sm-2 {
			margin-right: .5rem !important;
		}
	}

	// padding
	.ps-1 {
		padding-left: .25rem !important;
	}

	.ps-2 {
		padding-left: .5rem !important;
	}

	.pe-1 {
		padding-right: .25rem !important;
	}

	.pe-2 {
		padding-right: .5rem !important;
	}

	// margin
	.ms-auto {
		margin-left: auto !important;
	}

	.ms-0 {
		margin-left: 0 !important;
	}

	.ms-1 {
		margin-left: .25rem !important;
	}

	.ms-2 {
		margin-left: .5rem !important;
	}

	.me-0 {
		margin-right: 0 !important;
	}

	.me-1 {
		margin-right: .25rem !important;
	}

	.me-2 {
		margin-right: .5rem !important;
	}

	.float-end {
		float: right !important;
	}

	.float-start {
		float: left !important;
	}

	.visually-hidden, .sr-only, .visually-hidden-focusable:not(:focus):not(:focus-within) {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

& when (@bs < 4) {
	.SobiPro.default7 {
		@media (min-width: 576px) {
			.flex-sm-row {
				flex-direction: row !important;
			}

			.d-sm-flex {
				display: flex !important;
			}

			.mt-sm-0 {
				margin-top: 0 !important;
			}

			.mb-sm-0 {
				margin-bottom: 0 !important;
			}
		}

		// margin top
		.mt-1 {
			margin-top: .25rem !important;
		}

		.mt-2 {
			margin-top: .5rem !important;
		}

		.mt-3 {
			margin-top: 1rem !important;
		}

		.mt-4 {
			margin-top: 1.5rem !important;
		}

		.mt-5 {
			margin-top: 3rem !important;
		}

		// margin bottom
		.mb-1 {
			margin-bottom: .25rem !important;
		}

		.mb-2 {
			margin-bottom: .5rem !important;
		}

		.mb-3 {
			margin-bottom: 1rem !important;
		}

		.mb-4 {
			margin-bottom: 1.5rem !important;
		}

		.mb-5 {
			margin-bottom: 3rem !important;
		}

		.d-none {
			display: none !important;
		}
		.d-block {
			display: block !important;
		}

		.d-inline-block {
			display: inline-block !important;
		}

		// flex utilities
		.d-flex {
			display: -ms-flexbox !important;
			display: flex !important;
		}

		.flex-grow-1 {
			flex-grow: 1 !important;
		}

		.flex-fill {
			flex: 1 1 auto !important;
		}

		.flex-column {
			flex-direction: column !important;
		}

		.flex-row {
			flex-direction: row !important;
		}

		.justify-content-center {
			-ms-flex-pack: center !important;
			justify-content: center !important;
		}

		.justify-content-between {
			justify-content: space-between !important;
		}

		.justify-content-start {
			justify-content: start !important;
		}

		.align-items-start {
			align-items: flex-start !important;
		}

		.align-items-center {
			align-items: center !important;
		}

		// width
		.w-100 {
			width: 100% !important;
		}

		.w-70 {
			width: 70% !important;
		}

		.w-50 {
			width: 50% !important;
		}

		.w-25 {
			width: 25% !important;
		}

		.g-0, .gx-0 {
			--bs-gutter-x: 0;
		}

		.g-0, .gy-0 {
			--bs-gutter-y: 0;
		}

		// border utilities
		.border-bottom {
			border-bottom: 1px solid #dee2e6 !important;
		}

		// text utilities
		.text-nowrap {
			white-space: nowrap !important;
		}

		.text-center {
			text-align: center !important;
		}

		// padding
		.p-1 {
			padding: .25rem !important;
		}

		.p-2 {
			padding: .5rem !important;
		}

		.p-3 {
			padding: 1rem !important;
		}

		.pt-1 {
			padding-top: .25rem !important;
		}

		.pt-2 {
			padding-top: .5rem !important;
		}

		.pt-3 {
			padding-top: 1rem !important;
		}

		.pb-1 {
			padding-bottom: .25rem !important;
		}

		.pb-2 {
			padding-bottom: .5rem !important;
		}

		.pb-3 {
			padding-bottom: 1rem !important;
		}
	}
}

