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

.e-contact-buttons-var-6 {
	--e-contact-buttons-icon-size-small: 25px;
	--e-contact-buttons-icon-size-medium: 30px;
	--e-contact-buttons-icon-size-large: 35px;
	--e-contact-buttons-button-bar-bg: #324A6D;
	--e-contact-buttons-links-border-radius: #{$contact-buttons-border-radius-round};
	--e-contact-buttons-contact-button-icon-hover: #C8D5DC;
	--e-contact-buttons-button-bar-padding-block-end: 12px;
	--e-contact-buttons-button-bar-padding-block-start: 12px;
	--e-contact-buttons-button-bar-padding-inline-end: 12px;
	--e-contact-buttons-button-bar-padding-inline-start: 12px;
	--e-contact-buttons-vertical-offset: 20px;

	width: auto;

	.e-contact-buttons {

		&__contact-links {
			background-color: var(--e-contact-buttons-button-bar-bg);
			border-radius: var(--e-contact-buttons-links-border-radius);
			display: flex;
			justify-content: center;
			gap: 0;
			padding-inline-end: var(--e-contact-buttons-button-bar-padding-inline-end);
			padding-inline-start: var(--e-contact-buttons-button-bar-padding-inline-start);

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

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

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

		&__contact-icon-link {
			color: var(--e-contact-buttons-contact-button-icon);
			display: flex;
			padding-block-end: var(--e-contact-buttons-button-bar-padding-block-end);
			padding-block-start: var(--e-contact-buttons-button-bar-padding-block-start);
			padding-inline-end: var(--e-contact-buttons-button-bar-padding-inline-end);
			padding-inline-start: var(--e-contact-buttons-button-bar-padding-inline-start);

			svg {
				fill: var(--e-contact-buttons-contact-button-icon);
				height: 28px;
				transition: $transition-hover;
				width: 28px;
			}

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

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

			&.has-size-small {

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

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

			&.has-size-medium {

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

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

			&.has-size-large {

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

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

			}
		}
	}
}
