.e-contact-buttons-var-9 {
	--e-contact-buttons-size-small: 48px;
	--e-contact-buttons-size-medium: 56px;
	--e-contact-buttons-size-large: 64px;
	--e-contact-buttons-svg-size-small: 24px;
	--e-contact-buttons-svg-size-medium: 28px;
	--e-contact-buttons-svg-size-large: 32px;
	--e-contact-buttons-transition-duration: .3s;
	--e-contact-buttons-transition: all var(--e-contact-buttons-transition-duration);
	--e-contact-buttons-overlap-margin: -10px;
	--e-contact-buttons-chat-button-padding-block-end: 8px;
	--e-contact-buttons-chat-button-padding-block-start: 8px;
	--e-contact-buttons-chat-button-padding-inline-end: 16px;
	--e-contact-buttons-chat-button-padding-inline-start: 16px;

	width: auto;

	.e-contact-buttons {

		&__chat-button-icon-container {
			align-items: center;
			background-color: var(--e-contact-buttons-button-bg);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			position: relative;
			transition: var(--e-contact-buttons-transition);
			z-index: $first-layer;

			svg {
				position: relative;
				z-index: $second-layer;
			}
		}

		&__chat-button-text {
			background-color: var(--e-contact-buttons-button-bg);
			color: var(--e-contact-buttons-button-icon);
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			padding-block-end: var(--e-contact-buttons-chat-button-padding-block-end);
			padding-block-start: var(--e-contact-buttons-chat-button-padding-block-start);
			padding-inline-end: var(--e-contact-buttons-chat-button-padding-inline-end);
			padding-inline-start: var(--e-contact-buttons-chat-button-padding-inline-start);
			position: relative;
			transition: var(--e-contact-buttons-transition);
		}

		&__chat-button {
			background-color: transparent;
			border-radius: 0;
			color: var(--e-contact-buttons-button-icon);
			height: auto;
			width: auto;

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

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

				.e-contact-buttons {

					&__chat-button-icon-container,
					&__chat-button-text,
					&__chat-button-text::before {
						background-color: var(--e-contact-buttons-button-bg);
						color: var(--e-contact-buttons-button-icon);
						transition: var(--e-contact-buttons-transition);
					}
				}
			}

			&.has-size-small {

				.e-contact-buttons__chat-button-icon-container {
					height: var(--e-contact-buttons-size-small);
					width: var(--e-contact-buttons-size-small);

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

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

			&.has-size-medium {

				.e-contact-buttons__chat-button-icon-container {
					height: var(--e-contact-buttons-size-medium);
					width: var(--e-contact-buttons-size-medium);

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

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

			&.has-size-large {

				.e-contact-buttons__chat-button-icon-container {
					height: var(--e-contact-buttons-size-large);
					width: var(--e-contact-buttons-size-large);

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

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

	&.has-h-alignment-end {

		.e-contact-buttons {

			&__chat-button-container {
				padding-inline-end: 0;
			}

			&__chat-button-icon-container {

				@media (min-width: $screen-desktop-min) {
					position: absolute;
					inset-inline-end: -5px;
					transition: var(--e-contact-buttons-transition);
				}
			}

			&__chat-button-text {
				border-start-start-radius: 0;
				border-end-start-radius: 0;
				border-start-end-radius: 50px;
				border-end-end-radius: 50px;
				margin-inline-start: var(--e-contact-buttons-overlap-margin);

				@media (min-width: $screen-desktop-min) {
					clip-path: inset(0 0 0 100%);
				}
			}

			&__chat-button {

				&:hover,
				&:focus {

					@media (min-width: $screen-desktop-min) {

						.e-contact-buttons {

							&__chat-button-text {
								clip-path: inset(0 0 0 0);
								transition: var(--e-contact-buttons-transition);
							}

							&__chat-button-icon-container {
								inset-inline-end: 100%;
								transition: var(--e-contact-buttons-transition);
							}
						}
					}
				}
			}
		}
	}


	&.has-h-alignment-start {

		.e-contact-buttons__chat-button-container {
			padding-inline-start: 0;
		}

		.e-contact-buttons__chat-button-icon-container {
			order: 2;

			@media (min-width: $screen-desktop-min) {
				position: absolute;
				inset-inline-start: -5px;
				transition: var(--e-contact-buttons-transition);
			}
		}

		.e-contact-buttons__chat-button-text {
			border-start-start-radius: 50px;
			border-end-start-radius: 50px;
			border-start-end-radius: 0;
			border-end-end-radius: 0;
			margin-inline-end: var(--e-contact-buttons-overlap-margin);
			order: 1;

			@media (min-width: $screen-desktop-min)  {
				clip-path: inset(0 100% 0 0);
				transition: var(--e-contact-buttons-transition);
			}
		}

		.e-contact-buttons__chat-button {

			&:hover,
			&:focus {

				@media (min-width: $screen-desktop-min) {

					.e-contact-buttons__chat-button-text {
						clip-path: inset(0 0 0 0);
						transition: var(--e-contact-buttons-transition);
					}

					.e-contact-buttons__chat-button-icon-container {
						inset-inline-start: 100%;
						transition: var(--e-contact-buttons-transition);
					}
				}
			}
		}
	}

	&.has-h-alignment-center {

		.e-contact-buttons__chat-button-icon-container {

			@media (min-width: $screen-desktop-min) {
				order: 2;
				position: absolute;
				inset-inline-start: 50%;
				transform: translateX(-50%);
			}
		}

		.e-contact-buttons__chat-button-text {
			border-start-start-radius: 0;
			border-end-start-radius: 0;
			border-start-end-radius: 50px;
			border-end-end-radius: 50px;
			margin-inline-start: var(--e-contact-buttons-overlap-margin);

			@media (min-width: $screen-desktop-min) {
				inset-inline-end: 50%;
				order: 1;
				clip-path: inset(0 0 0 100%);
			}
		}

		.e-contact-buttons__chat-button {

			&:hover,
			&:focus {

				@media (min-width: $screen-desktop-min) {

					.e-contact-buttons__chat-button-text {
						clip-path: inset(0 0 0 0);
						transition: var(--e-contact-buttons-transition);
					}

					.e-contact-buttons__chat-button-icon-container {
						inset-inline-start: -100%;
    					transform: unset;
						transition: var(--e-contact-buttons-transition);
					}
				}
			}

			&.has-size-small {

				&:hover,
				&:focus {

					.e-contact-buttons__chat-button-icon-container {
						inset-inline-start: calc(-100% + 10px);
					}
				}
			}

			&.has-size-large {

				&:hover,
				&:focus {

					.e-contact-buttons__chat-button-icon-container {
						inset-inline-start: calc(-100% - 5px);
					}
				}
			}
		}
	}
}
