@import "./contact-buttons-vars";

.e-contact-buttons-var-10 {
	--e-contact-buttons-size-small: 40px;
	--e-contact-buttons-size-medium: 48px;
	--e-contact-buttons-size-large: 56px;
	--e-contact-buttons-svg-size-small: 20px;
	--e-contact-buttons-svg-size-medium: 24px;
	--e-contact-buttons-svg-size-large: 28px;
	--e-contact-buttons-svg-size: var(--e-contact-buttons-svg-size-medium);
	--e-contact-buttons-horizontal-offset: 0;
	--e-contact-buttons-transition-duration: .3s;
	--e-contact-buttons-transition: all var(--e-contact-buttons-transition-duration);
	--e-contact-buttons-contact-gap: 4px;
	--e-contact-buttons-contact-padding-block-end: 8px;
	--e-contact-buttons-contact-padding-block-start: 8px;
	--e-contact-buttons-contact-padding-inline-end: 12px;
	--e-contact-buttons-contact-padding-inline-start: 12px;

	width: auto;

	.has-corners-rounded {
		--e-contact-buttons-border-radius: #{$contact-buttons-border-radius-rounded};
	}

	.has-corners-round {
		--e-contact-buttons-border-radius: #{$contact-buttons-border-radius-round};
	}

	.has-corners-sharp {
		--e-contact-buttons-border-radius: #{$contact-buttons-border-radius-sharp};
	}

	.has-size-small {
		--e-contact-buttons-svg-size: var(--e-contact-buttons-svg-size-small);
	}

	.has-size-medium {
		--e-contact-buttons-svg-size: var(--e-contact-buttons-svg-size-medium);
	}

	.has-size-large {
		--e-contact-buttons-svg-size: var(--e-contact-buttons-svg-size-large);
	}

	.e-contact-buttons {

		&__contact-links {
			display: flex;
			gap: var(--e-contact-buttons-contact-gap);
		}

		&__contact-icon-container {
			align-items: center;
			display: inline-flex;
			justify-content: center;

			svg {
				height: var(--e-contact-buttons-svg-size);
				width: var(--e-contact-buttons-svg-size);
			}

			i {
				font-size: var(--e-contact-buttons-svg-size);
			}
		}

		&__contact-icon-link {
			align-items: center;
			background-color: var(--e-contact-buttons-contact-button-bg);
			color: var(--e-contact-buttons-contact-button-icon);
			display: flex;
			transition: $transition-hover;

			svg {
				fill: var(--e-contact-buttons-contact-button-icon);
			}

			&:hover,
			&:focus {
				background-color: var(--e-contact-buttons-contact-button-bg);
				color: var(--e-contact-buttons-contact-button-icon);
				transition: $transition-hover;

				svg {
					fill: var(--e-contact-buttons-contact-button-icon);
				}
			}
		}

		&__contact-title {
			display: inline-block;
			padding-block-end: var(--e-contact-buttons-contact-padding-block-end);
			padding-block-start: var(--e-contact-buttons-contact-padding-block-start);
			padding-inline-end: var(--e-contact-buttons-contact-padding-inline-end);
			padding-inline-start: var(--e-contact-buttons-contact-padding-inline-start);
		}
	}

	&.has-h-alignment-start {

		.e-contact-buttons {

			&__contact-icon-link {
				--e-contact-buttons-margin-offset: 8px;

				justify-content: flex-end;
				padding-inline-end: 12px;
				// Hiding the button by calculating the size of the button and the offset margin
				transform: translateX(calc(-100% + calc(var(--e-contact-buttons-svg-size) * 2) - var(--e-contact-buttons-margin-offset)));
				transition: var(--e-contact-buttons-transition);

				&.has-size-small {
					--e-contact-buttons-margin-offset: 2px;
				}

				[dir="rtl"] & {
					--e-contact-buttons-margin-offset: 2px;

					transform: translateX(calc(100% - calc(var(--e-contact-buttons-svg-size) * 2 - var(--e-contact-buttons-margin-offset))));

					&.has-size-large {
						--e-contact-buttons-margin-offset: 8px;
					}
				}
			}

			&__contact-links {
				align-items: flex-start;
				flex-direction: column;
			}

			&__contact-icon-link {
				border-start-start-radius: 0;
				border-start-end-radius: var(--e-contact-buttons-border-radius);
				border-end-start-radius: 0;
				border-end-end-radius: var(--e-contact-buttons-border-radius);

				&:hover,
				&:focus {

					@media (min-width: $screen-tablet-min) {
						transform: none;
						transition: var(--e-contact-buttons-transition);
					}
				}

				&.active {
					transform: none;
					transition: var(--e-contact-buttons-transition);
				}
			}
		}

	}

	&.has-h-alignment-end {

		.e-contact-buttons {

			&__contact-icon-link {
				--e-contact-buttons-margin-offset: 8px;

				padding-inline-start: 12px;
				// Hiding the button by calculating the size of the button and the offset margin
				transform: translateX(calc(100% - calc(var(--e-contact-buttons-svg-size) * 2) + var(--e-contact-buttons-margin-offset)));
				transition: var(--e-contact-buttons-transition);

				&.has-size-small {
					--e-contact-buttons-margin-offset: 2px;
				}

				[dir="rtl"] & {
					--e-contact-buttons-margin-offset: 2px;

					transform: translateX(calc(-100% + calc(var(--e-contact-buttons-svg-size) * 2 - var(--e-contact-buttons-margin-offset))));

					&.has-size-large {
						--e-contact-buttons-margin-offset: 8px;
					}
				}

				&:hover,
				&:focus {

					@media (min-width: $screen-tablet-min) {
						transform: none;
						transition: var(--e-contact-buttons-transition);
					}
				}

				&.active {
					transform: none;
					transition: var(--e-contact-buttons-transition);
				}
			}

			&__contact-links {
				align-items: flex-end;
				flex-direction: column;
			}

			&__contact-icon-container {
				order: 1;
			}

			&__contact-title {
				order: 2;
			}

			&__contact-icon-link {
				border-start-start-radius: var(--e-contact-buttons-border-radius);
				border-start-end-radius: 0;
				border-end-start-radius: var(--e-contact-buttons-border-radius);
				border-end-end-radius: 0;
			}
		}
	}

	&.has-h-alignment-center {

		.e-contact-buttons {

			&__contact-icon-link {
				flex-direction: column;
			}

			&__contact-title {
				writing-mode: vertical-lr;
			}
		}
	}

	&.has-h-alignment-center.has-v-alignment-bottom {

		.e-contact-buttons {

			&__contact-links {
				align-items: flex-end;
			}

			&__contact-icon-container {
				order: 1;
			}

			&__contact-title {
				order: 2;
			}

			&__contact-icon-link {
				--e-contact-buttons-margin-offset: 14px;

				border-start-start-radius: var(--e-contact-buttons-border-radius);
				border-start-end-radius: var(--e-contact-buttons-border-radius);
				border-end-start-radius: 0;
				border-end-end-radius: 0;
				padding-block-start: 12px;
				// Hiding the button by calculating the size of the button and the offset margin
				transform: translateY(calc(100% - var(--e-contact-buttons-svg-size) * 2 + var(--e-contact-buttons-margin-offset)));
				transition: var(--e-contact-buttons-transition);

				&:hover,
				&:focus {

					@media (min-width: $screen-tablet-min) {
						transform: none;
						transition: var(--e-contact-buttons-transition);
					}
				}

				&.active {
					transform: none;
					transition: var(--e-contact-buttons-transition);
				}

				&.has-size-small {
					--e-contact-buttons-margin-offset: 5px;
				}
			}
		}
	}

	&.has-h-alignment-center.has-v-alignment-top {

		.e-contact-buttons {

			&__contact-links {
				align-items: flex-start;
			}

			&__contact-icon-container {
				align-items: flex-end;
			}

			&__contact-icon-link {
				--e-contact-buttons-margin-offset: 14px;

				border-start-start-radius: 0;
				border-start-end-radius: 0;
				border-end-start-radius: var(--e-contact-buttons-border-radius);
				border-end-end-radius: var(--e-contact-buttons-border-radius);
				justify-content: flex-end;
				padding-block-end: 12px;
				// Hiding the button by calculating the size of the button and the offset margin
				transform: translateY(calc(-100% + var(--e-contact-buttons-svg-size) + var(--e-contact-buttons-margin-offset)));
				transition: var(--e-contact-buttons-transition);

				&:hover,
				&:focus {

					@media (min-width: $screen-tablet-min) {
						transform: none;
						transition: var(--e-contact-buttons-transition);
					}
				}

				&.active {
					transform: none;
					transition: var(--e-contact-buttons-transition);
				}
			}
		}
	}
}
