/**
 * Contact sidebar widget's style.
 */

@import '../bootstrap-core';

.contact-sidebar-widget {

	--button-margin: 10px;
	--button-size: 56px;
	--icon-slide: 30%;
	--icon-size-large: 30px;
	--icon-size-small: 15px;
	--icon-transition: 0.5s;

	&__button {

		position: fixed;
		right: var(--button-margin);
		bottom: var(--button-margin);
		z-index: 1033;
		width: var(--button-size);
		height: var(--button-size);
		border-radius: 50%;
		background: $color-primary;
		box-shadow: 0 4px 6px rgba($color-black, 0.25);
		transform: translateY(calc(100% + var(--button-size)));
		transition: all 0.25s ease-in-out;
		transition-property: box-shadow, background-color, transform, opacity;
		opacity: 0;

		i { margin: 0 }

		&__icon, .-load, .-close {
			font-size: var(--icon-size-large);
			color: $color-white;
		}

		.-icon, .-load, .-close {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.-icon {

			font-size: var(--icon-size-small);
			color: $color-primary;
			opacity: 0;
			transform: translateX(var(--icon-slide));
			transition: opacity var(--icon-transition) ease, transform var(--icon-transition) ease, color 0.25s ease-in-out;

			&.-active {

				opacity: 1;
				transform: translateX(0);

				&::before {
					animation: contact-sidebar-widget-pulse 1s ease-in-out var(--icon-transition);
					animation-delay: 1s;
				}

			}

			&.-leaving {
				opacity: 0;
				transform: translateX(calc(-1 * var(--icon-slide)));
			}

			&.-reset { transition: none; }

		}

		.-load, .-close { display: none; }

		&.-loading {

			--icon-size-large: 22px;

			.contact-sidebar-widget__button__icon, .-icon, .-close { display: none; }
			.-load { display: flex; }

		}

		&:hover {

			box-shadow: 0 24px 12px rgba($color-black, 0.25);
			transform: translateY(-20%) !important;
			background: $color-dark;

			.-icon { color: $color-dark; }

		}

		&.-opened {

			--button-size: 40px;
			--icon-size-large: 22px;

			box-shadow: none;
			transform: none !important;

			.contact-sidebar-widget__button__icon, .-icon, .-load { display: none; }
			.-close { display: flex; }

		}

	}

	&__panel {

		position: fixed;
		top: 0;
		right: 0;
		z-index: 1032;
		display: flex;
		width: 500px;
		max-width: 100%;
		height: 100%;
		background: $color-white;
		overflow: hidden;
		overflow-y: auto;
		transform: translateX(100%);
		transition: all 0.25s ease-in-out;
		transition-property: transform, box-shadow;
		pointer-events: none;
		padding: var(--button-margin);
		padding-top: 0;
		padding-bottom: calc(var(--button-margin) * 2 + 40px);
		overscroll-behavior: contain;

		&.-opened {
			box-shadow: 0 0 64px rgba($color-black, 0.15);
			transform: translateX(0);
			pointer-events: auto;
		}

	}

	&__overlay {

		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1031;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
		pointer-events: none;

		&.-opened {
			opacity: 1;
			background: rgba($color-dark, 0.35);
			pointer-events: auto;
		}

	}

	&__section {

		border-bottom: 1px solid transparent;
		transition: border-bottom-color 0.25s ease-in-out;

		&__title {
			cursor: pointer;
		}

		&__content {

			overflow: hidden;
			height: 0;
			opacity: 0;
			transition: all 0.25s ease-in-out;
			transition-property: padding, opacity;

			.form-group { margin-bottom: 0; }

			label.control-label {
				margin-bottom: 4px;
				font-weight: $font-weight-medium;
			}

			.help-block:empty { display: none; }

		}

		&.-opened {

			border-bottom: 1px solid $border-color;

			.contact-sidebar-widget__section__content {
				padding-block: var(--button-margin);
				height: auto;
				opacity: 1;
			}

			.contact-sidebar-widget__section__title {
				pointer-events: none;
				color: $color-primary;
				strong { font-weight: 600 !important; }
			}

			&:last-child { border-bottom-color: transparent; }

		}

	}

	&__map {

		display: block;
		aspect-ratio: 16/9;
		background: $color-light;

		iframe {
			width: 300% !important;
			height: 200% !important;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			pointer-events: none;
			background: transparent;
		}

	}

	&__contacts {

		a {

			display: flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			font-size: $font-size-2;
			border-radius: 50%;
			border: 2px solid rgba($color-white, 0.5);
			color: $color-white;
			transition: border-color 0.25s ease-in-out;

			&:hover {
				border-color: $color-white;
				color: $color-white;
			}

		}

	}

	&__fixed-value {
		padding: 10px;
		line-height: 18px;
		font-size: $font-size-4;
		font-weight: $font-weight-medium;
		border: 1px solid $color-gray-light;
		border-radius: $border-radius;
		background: $color-light;
	}

	// The input wraps under the image instead of shrinking when the two do not fit side by side.
	&__captcha-row > .flex-fill { min-width: 160px; }

	&__captcha {

		flex: 0 0 auto;
		max-width: 100%;
		border: 1px solid $color-gray-light;
		border-radius: $border-radius;
		cursor: pointer;

		img {
			display: block;
			width: 225px;
			max-width: 100%;
			height: 38px;
			object-fit: contain;
		}

	}

	.-address-link {
		color: rgba($color-white, 0.75);
		&:hover { color: $color-white; }
	}

	.offer-services {

		&__item {
			gap: 5px;
			label { cursor: pointer; }
		}

		&__info {
			flex: 0 0 auto;
			color: $color-gray;
			&:hover { color: $color-primary; }
		}

		#offer-services { display: flex; flex-direction: column; gap: 5px; }

	}

	// Long legal texts: small enough to have a chance of staying on one line.
	.field-offer-terms, .field-offer-privacy {
		label { font-size: $font-size-5; }
	}

	/*
	 * The line box is exactly as tall as the checkbox square (18px, see components/checkbox), so a
	 * one-line label sits centred next to it and a wrapped one lines the box up with its first row.
	 */
	label:has(> .checkbox) {
		line-height: 18px;
		> .checkbox { vertical-align: top; }
	}

	.checkbox.-checked {
		border-color: $color-primary;
		background: $color-primary;
		transition-property: border, background;
		i { color: $color-white; }
	}

	form.-user  { .-company { display: none !important; } }
	form.-company { .-user  { display: none !important; } }

	&.widget-initialized {
		.contact-sidebar-widget__button {
			transform: none;
			opacity: 1;
		}
	}

}

@keyframes contact-sidebar-widget-pulse {
	0%, 100% { transform: scale(1); }
	35%      { transform: scale(1.25); }
	55%      { transform: scale(0.95); }
	75%      { transform: scale(1.1); }
}

@include media-breakpoint-up(lg) {

	.contact-sidebar-widget {
		--button-margin: 20px;
		--button-size: 64px;
		--icon-size-large: 36px;
		--icon-size-small: 17px;
	}

	body:has(.contact-sidebar-widget__panel.-opened) {
		overflow: hidden;
	}

}

@include media-breakpoint-down(lg) {
	body:has(.header-widget nav.-opened) {
		.contact-sidebar-widget__button { display: none !important; }
	}
}

@media print {
	.contact-sidebar-widget { display: none !important; }
}