.e-contact-buttons-var-1 {
	--e-contact-buttons-button-bg: #324A6D;
	--e-contact-buttons-button-bg-hover: #1C2448;
	--e-contact-buttons-top-bar-bg: #324A6D;
	--e-contact-buttons-message-bubble-name: #1C2448;
	--e-contact-buttons-message-bubble-body: #1C2448;
	--e-contact-buttons-message-bubble-time: #1C2448;
	--e-contact-buttons-message-bubble-bubble-bg: #C8D5DC;
	--e-contact-buttons-message-bubble-chat-bg: #FFFFFF;
	--e-contact-buttons-contact-text: #1C2448;
	--e-contact-buttons-var-1-size-small: 26px;
	--e-contact-buttons-var-1-size-medium: 28px;
	--e-contact-buttons-var-1-size-large: 32px;

	.e-contact-buttons {

		&__contact {
			align-items: center;
			background-color: var(--e-contact-buttons-chat-box-bg);
			display: flex;
			flex-direction: column;
			gap: 20px;
			justify-content: center;
			padding: 0 20px 20px 20px;
		}

		&__message-bubble {
			background-color: var(--e-contact-buttons-chat-box-bg);
			padding: 20px;
			padding-inline-start: 40px;
		}

		&__contact-text {
			color: var(--e-contact-buttons-contact-text);
			font-size: 20px;
			font-weight: 400;
			line-height: 25px;
			margin-bottom: 0;
		}

		&__contact-links {
			display: flex;
			gap: 12px;
		}

		&__contact-icon-link {
			align-items: center;
			background-color: var(--e-contact-buttons-contact-button-bg);
			border-radius: 50px;
			color: var(--e-contact-buttons-contact-button-icon);
			display: inline-flex;
			justify-content: center;
			transition: $transition-hover;

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

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

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

			&.has-size-small {
				height: var(--e-contact-buttons-icon-size-small);
				width: var(--e-contact-buttons-icon-size-small);

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

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

			&.has-size-medium {
				height: var(--e-contact-buttons-icon-size-medium);
				width: var(--e-contact-buttons-icon-size-medium);

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

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

			&.has-size-large {
				height: var(--e-contact-buttons-icon-size-large);
				width: var(--e-contact-buttons-icon-size-large);

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

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

}
