.e-contact-buttons-var-3 {
	--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-icon-link-gap: 12px;
	--e-contact-buttons-icon-link-spacing: 8px;
	--e-contact-buttons-icon-link-divider-weight: 1px;
	--e-contact-buttons-send-button-padding-block-end: 8px;
	--e-contact-buttons-send-button-padding-block-start: 8px;
	--e-contact-buttons-send-button-padding-inline-end: 16px;
	--e-contact-buttons-send-button-padding-inline-start: 16px;
	--e-contact-buttons-chat-box-padding-block-end: 16px;
	--e-contact-buttons-chat-box-padding-block-start: 16px;
	--e-contact-buttons-chat-box-padding-inline-end: 16px;
	--e-contact-buttons-chat-box-padding-inline-start: 16px;

	--e-contact-buttons-button-bg: #324A6D;
	--e-contact-buttons-button-bg-hover: #1C2448;
	--e-contact-buttons-active-button-bg: #F3F5F8;
	--e-contact-buttons-active-button-color: #1C2448;
	--e-contact-buttons-close-button-color: #1C2448;
	--e-contact-buttons-top-bar-title: #1C2448;
	--e-contact-buttons-icon-link-text-color: #1C2448;
	--e-contact-buttons-icon-link-text-color-hover: #324A6D;
	--e-contact-buttons-icon-link-divider-color: #324A6D;
	--e-contact-buttons-send-button-text: #ffffff;
	--e-contact-buttons-send-button-text-hover: #ffffff;
	--e-contact-buttons-send-button-bg: #467FF7;
	--e-contact-buttons-send-button-bg-hover: #324A6D;

	width: auto;

	&.has-h-alignment-center {

		.e-contact-buttons__content-wrapper {
			inset-inline-end: 40px;
		}
	}

	.e-contact-buttons {

		&__chat-buttons-container {
			display: flex;
		}

		&__chat-button,
		&__chat-button[type="button"] {

			&[aria-expanded="true"] {
				background-color: var(--e-contact-buttons-active-button-bg);
				color: var(--e-contact-buttons-active-button-color);

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

		&__close-button,
		&__chat-button,
		&__close-button[type="button"],
		&__chat-button[type="button"] {

			&.has-size-small {
				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 {
				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 {
				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);
				}
			}
		}

		&__content {
			background-color: var(--e-contact-buttons-chat-box-bg);
			padding-block-start: var(--e-contact-buttons-chat-box-padding-block-start);
			padding-block-end: var(--e-contact-buttons-chat-box-padding-block-end);
			padding-inline-start: var(--e-contact-buttons-chat-box-padding-inline-start);
			padding-inline-end: var(--e-contact-buttons-chat-box-padding-inline-end);
		}

		&__top-bar {
			background-color: var(--e-contact-buttons-chat-box-bg);
			padding: 0 20px 20px 0;
			position: relative;

			.e-contact-buttons__close-button {
				background: none;
				border: 0;
				color: var(--e-contact-buttons-close-button-color);
				display: flex;
				padding: 0;
				position: absolute;
				inset-inline-end: 0;
				top: 0;

				&:hover,
				&:focus {
					background: none;
					border: 0;
					color: var(--e-contact-buttons-close-button-color);
				}
			}
		}

		&__top-bar-title {
			font-size: 18px;
			font-weight: 600;
			line-height: 18px;
		}

		&__links {
			background-color: var(--e-contact-buttons-chat-box-bg);
			display: flex;
			flex-direction: column;
			padding-inline: 16px;
			padding-block-end: 20px;
		}

		&__contact-icon-link:not([href]):not([tabindex]), // to override inline styles when the href is not set
		&__contact-icon-link {
			color: var(--e-contact-buttons-icon-link-text-color);
			display: flex;
			flex-direction: row;
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			gap: var(--e-contact-buttons-icon-link-gap);
			margin-block-end: var(--e-contact-buttons-icon-link-spacing);

			&:last-of-type {
				margin-block-end: 0;
			}

			// Icon size is relative to the font-size
			svg {
				fill: var(--e-contact-buttons-icon-link-text-color);
				height: 1em;
				width: 1em;
			}

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

				svg {
					fill: var(--e-contact-buttons-icon-link-text-color-hover);
				}
			}

			&.has-icon-position-start {

				.e-contact-buttons {

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

					&__contact-tooltip {
						order: 2;
					}
				}
			}

			&.has-icon-position-end {

				.e-contact-buttons {

					&__contact-icon-container {
						display: flex;
						flex-grow: 1;
						justify-content: flex-end;
						order: 2;
					}

					&__contact-tooltip {
						order: 1;
					}
				}
			}

			&.has-dividers {
				padding-block-end: var(--e-contact-buttons-icon-link-spacing);
				position: relative;

				&::after {
					background-color: var(--e-contact-buttons-icon-link-divider-color);
					bottom: 0;
					content: "";
					display: block;
					height: var(--e-contact-buttons-icon-link-divider-weight);
					position: absolute;
					left: 0;
					width: 100%;
				}

				&:last-of-type {
					padding-block-end: 0;

					&::after {
						display: none;
					}
				}
			}
		}

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

		&__cta-button {
			background-color: var(--e-contact-buttons-send-button-bg);
			border-radius: 5px;
			color: var(--e-contact-buttons-send-button-text);
			display: flex;
			font-size: 16px;
			font-weight: 500;
			justify-content: center;
			line-height: 24px;
			padding-block-start: var(--e-contact-buttons-send-button-padding-block-start);
			padding-block-end: var(--e-contact-buttons-send-button-padding-block-end);
			padding-inline-start: var(--e-contact-buttons-send-button-padding-inline-start);
			padding-inline-end: var(--e-contact-buttons-send-button-padding-inline-end);

			&:hover,
			&:focus {
				background-color: var(--e-contact-buttons-send-button-bg-hover);
				color: var(--e-contact-buttons-send-button-text-hover);
			}
		}
	}
}
