@total_onion/onion-library 1.0.0

package/components/component-social-media-share/social-media-share.scss

@@ -0,0 +1,128 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/theme/breakpoints';
+@use './social-media-share-extra';
+@use 'Assets/scss/modules/library-modules/grid-layout-element/grid-layout-element';
+
+@mixin social-media-share() {
+	.social-media-share-popup {
+		@include grid-layout-element.gridLayoutElement();
+		.social-media-page-content {
+			display: grid;
+			grid-template-areas: ' left right ';
+			grid-template-columns: fit-content(100%) fit-content(100%);
+			grid-gap: var(--social-media-share-grid-gap);
+			place-content: var(--social-media-share-horizontal-align);
+			align-items: center;
+
+			.social-media-share-text {
+				grid-area: var(--social-media-share-col1);
+				color: var(--theme-primary-text-colour);
+				text-decoration-line: underline;
+				font-size: core-functions.fontSize(16, 'static');
+				cursor: pointer;
+			}
+
+			.social-media-share-icon {
+				grid-area: var(--social-media-share-col2);
+				padding-top: core-functions.fluidSize(9, 'static');
+
+				.share-icon-img {
+					transform: rotate(var(--social-share-icon-rotate));
+					cursor: pointer;
+				}
+			}
+		}
+
+		dialog::backdrop {
+			backdrop-filter: blur(10px);
+		}
+
+		dialog {
+			min-width: core-functions.fluidSize(334, 'static');
+			width: calc(100% - 30px);
+			max-width: core-functions.fluidSize(330, 'static');
+			overflow: visible;
+			box-shadow: var(--social-share-popup-shadow);
+			background-color: var(--social-share-popup-background-colour);
+			border-radius: core-functions.fluidSize(20, 'static');
+			border: none;
+			padding: core-functions.fluidSize(40, 'static') core-functions.fluidSize(20, 'static');
+			height: -moz-fit-content;
+			height: fit-content;
+			font-size: core-functions.fontSize(50, 'static');
+			line-height: 1em;
+			text-transform: uppercase;
+
+			.icon-close {
+				background-color: white;
+				width: core-functions.fluidSize(48, 'static');
+				height: core-functions.fluidSize(48, 'static');
+				border-radius: 50%;
+				position: absolute;
+				top: core-functions.fluidSize(-25, 'static');
+				right: core-functions.fluidSize(20, 'static');
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+			}
+
+			.dialog-actions {
+				text-align: center;
+
+				h3 {
+					font-size: core-functions.fontSize(50, 'static');
+					font-family: var(--primary-font-family);
+					color: var(--social-share-popup-font-colour);
+				}
+
+				.wrapper-content-icons {
+					display: flex;
+					justify-content: center;
+					column-gap: 1rem;
+					padding-top: core-functions.fluidSize(20, 'static');
+
+					a {
+						background-color: #ffffff;
+						border-radius: 50%;
+						height: core-functions.fluidSize(var(--social-media-share-a-size, 40),
+								'static'
+							);
+
+						svg {
+							display: block;
+						}
+
+						svg:hover {
+							fill: purple;
+						}
+
+						svg:hover rect {
+							fill: purple;
+						}
+
+						svg:hover path {
+							fill: purple;
+						}
+					}
+
+					a:focus-visible {
+						outline: unset;
+					}
+				}
+
+				.social-media-message {
+					display: none;
+					color: white;
+					font-size: core-functions.fontSize(16, 'static');
+					justify-content: center;
+					align-items: center;
+				}
+			}
+		}
+
+		@include social-media-share-extra.additionalStyles();
+	}
+}

package/components/component-social-media-share/social-media-share.twig

@@ -0,0 +1,213 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+
+{% if fields.social_media_share_post == false %}{% endif %}
+
+{% if fields.social_share_popup_media_options %}
+	{% set commmaSeparatedMediaOptions = fields.social_share_popup_media_options|join(',')|replace({'__': ""}) %}
+{% endif %}
+
+{% if fields.social_share_popup_background_colour %}
+	{% set popupBackgroundColour = '--social-share-popup-background-colour: ' ~ fields.social_share_popup_background_colour ~ ';' %}
+{% endif %}
+{% if fields.social_share_popup_font_colour %}
+	{% set popupFontColour = '--social-share-popup-font-colour: ' ~ fields.social_share_popup_font_colour ~ ';' %}
+{% endif %}
+{% if fields.social_share_popup_icon_colour %}
+	{% set popupIconColour = fields.social_share_popup_icon_colour %}
+{% else %}
+	{% set popupIconColour = '#000000' %}
+{% endif %}
+{% if fields.social_share_popup_icon_size %}
+	{% set popupIconSize = fields.social_share_popup_icon_size %}
+	{% set popupIconAnchorSize = '--social-media-share-a-size: ' ~ fields.social_share_popup_icon_size ~ ';' %}
+{% endif %}
+
+{% if fields.default_post == true %}
+	{% set shareUrl = fn('get_permalink',fields.social_media_share_post) %}
+	{% set postTitle = fn('get_the_title', fields.social_media_share_post) %}
+{% else %}
+	{% set shareUrl = fn('get_permalink') %}
+	{% set postID = fn('get_the_ID') %}
+	{% set postTitle = fn('get_the_title', postID) %}
+{% endif %}
+{% set copyUrl = shareUrl %}
+{% set shareUrl = shareUrl|url_encode(true) %}
+
+{% set iconRotate = '--social-share-icon-rotate: ' ~ fields.social_share_icon_rotate ~ 'deg;' %}
+{% set horizontalAlignment = '--social-media-share-horizontal-align: ' ~ fields.social_share_horizontal_alignment|ru ~ ';' %}
+{% set gridGap = '--social-media-share-grid-gap: ' ~ fields.space_between_icon_and_text ~ 'px;' %}
+
+{% set swapCol1Content = '--social-media-share-col1: left;' %}
+{% set swapCol2Content = '--social-media-share-col2: right;' %}
+{% if fields.swap_left_right_icon_and_text %}
+	{% set swapCol1Content = '--social-media-share-col1: right;' %}
+	{% set swapCol2Content = '--social-media-share-col2: left;' %}
+{% endif %}
+
+{% if fields.social_share_popup_background_shadow %}
+	{% set popupShadow = '--social-share-popup-shadow: 6px 6px 0px 0px #000;' %}
+{% else %}
+	{% set popupShadow = '--social-share-popup-shadow: none;' %}
+{% endif %}
+
+{% set elementStyles = gridLayoutElement ~ horizontalAlignment ~ popupBackgroundColour ~ popupFontColour ~ iconRotate ~ gridGap ~ swapCol1Content ~ swapCol2Content ~ popupShadow ~ popupIconAnchorSize %}
+
+{% set randomNumber = random() %}
+{% set uniqueDialogID = 'socialMediaDialog' ~ randomNumber %}
+
+<div class="social-media-share-popup" style="{{elementStyles}}">
+	<div class="social-media-page-content">
+		{% if fields.native_share %}
+			<div class="social-media-share-text social-media-share-native">
+				{{fields.social_share_text_on_page}}
+			</div>
+		{% else %}
+			<div class="social-media-share-text" onclick="document.body.classList.add('lock-position');window.{{uniqueDialogID}}.showModal();">
+				{{fields.social_share_text_on_page}}
+			</div>
+		{% endif %}
+		<div class="social-media-share-icon">
+			{% if cta_styles.theme_cta_icons.cta_share_icon is not empty %}
+				{% if fields.native_share %}
+					<img class="icon share-icon-img social-media-share-native" src="{{cta_styles.theme_cta_icons.cta_share_icon}}">
+				{% else %}
+					<img class="icon share-icon-img" src="{{cta_styles.theme_cta_icons.cta_share_icon}}" onclick="document.body.classList.add('lock-position');window.{{uniqueDialogID}}.showModal();">
+				{% endif %}
+			{% else %}
+				{% if fields.native_share %}
+					<svg class="share-icon-img social-media-share-native" width="{{fields.social_share_icon_size}}" height="{{fields.social_share_icon_size}}" viewbox="0 0 16 16">
+						<path id="Share" d="M12.8,9.6a3,3,0,0,0-2.4,1.12l-4.08-2a2.57,2.57,0,0,0,0-1.36L10.4,5.28A3,3,0,0,0,12.8,6.4,3.2,3.2,0,1,0,9.6,3.2a1.56,1.56,0,0,0,.08.64L5.6,5.92A3,3,0,0,0,3.2,4.8a3.2,3.2,0,1,0,0,6.4,3,3,0,0,0,2.4-1.12l4.08,2a2.215,2.215,0,0,0-.08.72,3.2,3.2,0,1,0,3.2-3.2" fill="{{fields.social_share_icon_colour}}"/>
+					</svg>
+				{% else %}
+					<svg class="share-icon-img" onclick="document.body.classList.add('lock-position');window.{{uniqueDialogID}}.showModal();" xmlns="http://www.w3.org/2000/svg" width="{{fields.social_share_icon_size}}" height="{{fields.social_share_icon_size}}" viewbox="0 0 16 16">
+						<path id="Share" d="M12.8,9.6a3,3,0,0,0-2.4,1.12l-4.08-2a2.57,2.57,0,0,0,0-1.36L10.4,5.28A3,3,0,0,0,12.8,6.4,3.2,3.2,0,1,0,9.6,3.2a1.56,1.56,0,0,0,.08.64L5.6,5.92A3,3,0,0,0,3.2,4.8a3.2,3.2,0,1,0,0,6.4,3,3,0,0,0,2.4-1.12l4.08,2a2.215,2.215,0,0,0-.08.72,3.2,3.2,0,1,0,3.2-3.2" fill="{{fields.social_share_icon_colour}}"/>
+					</svg>
+				{% endif %}
+			{% endif %}
+		</div>
+	</div>
+	<dialog id="{{uniqueDialogID}}">
+		<div class="icon-close" onclick="window.{{uniqueDialogID}}.close();document.body.classList.remove('lock-position');">
+			<svg width='14' height='14' viewbox='0 0 14 14' fill='black' xmlns='http://www.w3.org/2000/svg'>
+				<path d='M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z' fill='#000000'/>
+			</svg>
+		</div>
+		<div class="dialog-actions">
+			<div class="wrapper-content">
+				{% if fields.social_share_info_on_popup %}
+					{% set shareTitle = fields.social_share_info_on_popup | replace({'%%post_title%%': postTitle}) %}
+					<h3 class="share-text">{{shareTitle}}</h3>
+				{% endif %}
+				<div class="wrapper-content-icons">
+					{% if 'twitter' in commmaSeparatedMediaOptions %}
+						<a class="social-share-x" href="https://www.twitter.com/intent/tweet?url={{shareUrl}}" target="_blank">
+							{% if cta_styles.theme_cta_icons.cta_x_icon is not empty %}
+								<img class="icon" src="{{cta_styles.theme_cta_icons.cta_x_icon}}">
+							{% else %}
+								<svg xmlns="http://www.w3.org/2000/svg" width="{{popupIconSize}}" height="{{popupIconSize}}" viewBox="0 0 40 41" fill="none">
+									<path d="M23.2989 17.4373L37.873 0.5H34.4194L21.7648 15.2064L11.6575 0.5H0L15.2841 22.7387L0 40.5H3.45378L16.8174 24.9695L27.4914 40.5H39.1489L23.2981 17.4373H23.2989ZM18.5685 22.9346L17.0199 20.7201L4.69823 3.09936H10.003L19.9468 17.3199L21.4954 19.5344L34.4211 38.0189H29.1162L18.5685 22.9354V22.9346Z" fill="{{popupIconColour}}"/>
+								</svg>
+							{% endif %}
+						</a>
+					{% endif %}
+
+					{% if 'facebook' in commmaSeparatedMediaOptions %}
+						<a class="social-share-facebook" href="https://www.facebook.com/sharer.php?u={{shareUrl}}" target="_blank">
+							{% if cta_styles.theme_cta_icons.cta_facebook_icon is not empty %}
+								<img class="icon" src="{{cta_styles.theme_cta_icons.cta_facebook_icon}}">
+							{% else %}
+							<svg xmlns="http://www.w3.org/2000/svg" width="{{popupIconSize}}" height="{{popupIconSize}}" viewBox="0 0 23 41" fill="none">
+								<path d="M13.8527 0.10791C11.6827 0.10791 9.60164 0.969921 8.06725 2.50431C6.53287 4.0387 5.67085 6.11978 5.67085 8.28973V14.6534H1.1254C0.884294 14.6534 0.653063 14.7491 0.482575 14.9196C0.312088 15.0901 0.216309 15.3214 0.216309 15.5625V22.8352C0.216309 23.0763 0.312088 23.3075 0.482575 23.478C0.653063 23.6485 0.884294 23.7443 1.1254 23.7443H5.67085V39.1988C5.67085 39.4399 5.76663 39.6712 5.93712 39.8416C6.10761 40.0121 6.33884 40.1079 6.57995 40.1079H13.8527C14.0938 40.1079 14.325 40.0121 14.4955 39.8416C14.666 39.6712 14.7618 39.4399 14.7618 39.1988V23.7443H19.3072C19.51 23.7442 19.7069 23.6764 19.8667 23.5515C20.0265 23.4266 20.14 23.2519 20.189 23.0552L22.0072 15.7825C22.0406 15.6485 22.0431 15.5086 22.0144 15.3736C21.9857 15.2385 21.9266 15.1117 21.8416 15.0029C21.7566 14.8941 21.648 14.806 21.5239 14.7455C21.3998 14.6849 21.2635 14.6534 21.1254 14.6534H14.7618V11.9261C14.7618 11.2028 15.0491 10.5091 15.5606 9.99762C16.072 9.48616 16.7657 9.19882 17.489 9.19882H21.1254C21.3665 9.19882 21.5977 9.10304 21.7682 8.93255C21.9387 8.76206 22.0345 8.53084 22.0345 8.28973V1.017C22.0345 0.775895 21.9387 0.544664 21.7682 0.374177C21.5977 0.203689 21.3665 0.10791 21.1254 0.10791H13.8527Z" fill="{{popupIconColour}}"/>
+							</svg>
+							{% endif %}
+						</a>
+					{% endif %}
+
+					{% if 'pinterest' in commmaSeparatedMediaOptions %}
+						<a class="social-share-pinterest" href="https://pinterest.com/pin/create/link/?url={{shareUrl}}" target="_blank">
+							{% if cta_styles.theme_cta_icons.cta_pinterest_icon is not empty %}
+								<img class="icon" src="{{cta_styles.theme_cta_icons.cta_pinterest_icon}}">
+							{% else %}
+								<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="{{popupIconSize}}" height="{{popupIconSize}}" viewbox="-35 -35 150 150" xml:space="preserve">
+									<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;">
+										<path d="M 25.334 90 c 3.415 -2.853 8.943 -12.256 10.189 -17.048 c 0.671 -2.581 3.437 -13.114 3.437 -13.114 c 1.799 3.43 7.054 6.334 12.644 6.334 c 16.638 0 28.626 -15.301 28.626 -34.312 C 80.229 13.636 65.357 0 46.22 0 C 22.415 0 9.771 15.981 9.771 33.382 c 0 8.091 4.307 18.164 11.198 21.371 c 1.045 0.486 1.604 0.272 1.845 -0.738 c 0.183 -0.767 1.113 -4.513 1.532 -6.256 c 0.134 -0.557 0.068 -1.036 -0.383 -1.582 c -2.279 -2.764 -4.105 -7.848 -4.105 -12.589 c 0 -12.167 9.213 -23.94 24.909 -23.94 c 13.552 0 23.042 9.235 23.042 22.443 c 0 14.923 -7.536 25.261 -17.341 25.261 c -5.415 0 -9.469 -4.478 -8.169 -9.968 c 1.555 -6.558 4.569 -13.634 4.569 -18.367 c 0 -4.237 -2.274 -7.771 -6.98 -7.771 c -5.536 0 -9.982 5.727 -9.982 13.397 c 0 4.886 1.65 8.19 1.65 8.19 s -5.467 23.115 -6.469 27.421 c -1.109 4.764 -0.674 11.476 -0.191 15.84 L 25.334 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" fill="{{popupIconColour}}"/>
+									</g>
+								</svg>
+							{% endif %}
+						</a>
+					{% endif %}
+
+					{% if 'linkedin' in commmaSeparatedMediaOptions %}
+						<a class="social-share-linkedin" href="https://www.linkedin.com/feed/?shareActive=true&amp;text={{shareUrl}}" target="_blank">
+							{% if cta_styles.theme_cta_icons.cta_linkedin_icon is not empty %}
+								<img class="icon" src="{{cta_styles.theme_cta_icons.cta_linkedin_icon}}">
+							{% else %}
+								<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{popupIconSize}}" height="{{popupIconSize}}" viewbox="-8 -8 40 40">
+									<g id="Linkedin-2" data-name="Linkedin">
+										<path id="Linkedin-3" data-name="Linkedin" d="M21.333,0H2.667A2.667,2.667,0,0,0,0,2.667V21.333A2.667,2.667,0,0,0,2.667,24H21.333A2.667,2.667,0,0,0,24,21.333V2.667A2.667,2.667,0,0,0,21.333,0M7.256,20.667H3.677V9.111H7.256ZM5.45,7.6A2.132,2.132,0,1,1,7.566,5.466,2.124,2.124,0,0,1,5.45,7.6M20.667,20.667H17.105V14.6c0-1.663-.632-2.592-1.948-2.592-1.432,0-2.18.967-2.18,2.592v6.066H9.544V9.111h3.432v1.557a4.032,4.032,0,0,1,3.484-1.91c2.451,0,4.206,1.5,4.206,4.592Z" fill="{{popupIconColour}}"></path>
+									</g>
+									<rect id="Rectangle_2265" data-name="Rectangle 2265" width="{{popupIconSize}}" height="{{popupIconSize}}" transform="translate(1263 459)" fill="black" opacity="0"></rect>
+								</svg>
+							{% endif %}
+						</a>
+					{% endif %}
+
+					{% if 'instagram' in commmaSeparatedMediaOptions %}
+						<a class="social-share-instagram" href="https://www.linkedin.com/feed/?shareActive=true&amp;text={{shareUrl}}" target="_blank">
+							{% if cta_styles.theme_cta_icons.cta_instagram_icon is not empty %}
+								<img class="icon" src="{{cta_styles.theme_cta_icons.cta_instagram_icon}}">
+							{% else %}
+								<svg xmlns="http://www.w3.org/2000/svg" width="{{popupIconSize}}" height="{{popupIconSize}}" viewBox="0 0 40 41" fill="none">
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.5C8.8174 0.5 5.76516 1.76428 3.51472 4.01472C1.26428 6.26516 0 9.3174 0 12.5V28.5C0 31.6826 1.26428 34.7348 3.51472 36.9853C5.76516 39.2357 8.8174 40.5 12 40.5H28C31.1826 40.5 34.2348 39.2357 36.4853 36.9853C38.7357 34.7348 40 31.6826 40 28.5V12.5C40 9.3174 38.7357 6.26516 36.4853 4.01472C34.2348 1.76428 31.1826 0.5 28 0.5H12ZM2.66667 12.5C2.66667 7.34444 6.84444 3.16667 12 3.16667H28C33.1556 3.16667 37.3333 7.34444 37.3333 12.5V28.5C37.3333 33.6556 33.1556 37.8333 28 37.8333H12C9.52465 37.8333 7.15068 36.85 5.40034 35.0997C3.65 33.3493 2.66667 30.9754 2.66667 28.5V12.5ZM33.3333 10.2778C33.3333 10.8671 33.0992 11.4324 32.6825 11.8491C32.2657 12.2659 31.7005 12.5 31.1111 12.5C30.5217 12.5 29.9565 12.2659 29.5398 11.8491C29.123 11.4324 28.8889 10.8671 28.8889 10.2778C28.8889 9.68841 29.123 9.12318 29.5398 8.70643C29.9565 8.28968 30.5217 8.05556 31.1111 8.05556C31.7005 8.05556 32.2657 8.28968 32.6825 8.70643C33.0992 9.12318 33.3333 9.68841 33.3333 10.2778ZM20 12.9444C19.0078 12.9444 18.0253 13.1399 17.1086 13.5196C16.1919 13.8993 15.359 14.4558 14.6574 15.1574C13.9558 15.859 13.3993 16.6919 13.0196 17.6086C12.6399 18.5253 12.4444 19.5078 12.4444 20.5C12.4444 21.4922 12.6399 22.4747 13.0196 23.3914C13.3993 24.3081 13.9558 25.141 14.6574 25.8426C15.359 26.5442 16.1919 27.1007 17.1086 27.4804C18.0253 27.8601 19.0078 28.0556 20 28.0556C22.0039 28.0556 23.9256 27.2595 25.3426 25.8426C26.7595 24.4256 27.5556 22.5039 27.5556 20.5C27.5556 18.4961 26.7595 16.5744 25.3426 15.1574C23.9256 13.7405 22.0039 12.9444 20 12.9444ZM9.77778 20.5C9.77778 17.7889 10.8548 15.1888 12.7718 13.2718C14.6888 11.3548 17.2889 10.2778 20 10.2778C22.7111 10.2778 25.3112 11.3548 27.2282 13.2718C29.1452 15.1888 30.2222 17.7889 30.2222 20.5C30.2222 23.2111 29.1452 25.8112 27.2282 27.7282C25.3112 29.6452 22.7111 30.7222 20 30.7222C17.2889 30.7222 14.6888 29.6452 12.7718 27.7282C10.8548 25.8112 9.77778 23.2111 9.77778 20.5Z" fill="{{popupIconColour}}"/>
+								</svg>
+							{% endif %}
+						</a>
+					{% endif %}
+
+					{% if 'whatsapp' in commmaSeparatedMediaOptions %}
+						<a class="social-share-whatsapp" href="https://api.whatsapp.com/send?text={{shareUrl}}" target="_blank">
+							{% if cta_styles.theme_cta_icons.cta_whatsapp_icon is not empty %}
+								<img class="icon" src="{{cta_styles.theme_cta_icons.cta_whatsapp_icon}}">
+							{% else %}
+								<svg xmlns="http://www.w3.org/2000/svg" width="{{popupIconSize}}" height="{{popupIconSize}}" viewBox="0 0 40 41" fill="none">
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M34 6.25C30.25 2.5 25.25 0.5 20 0.5C9 0.5 0 9.5 0 20.5C0 24 1.00002 27.5 2.75002 30.5L0 40.5L10.5 37.75C13.5 39.25 16.75 40.25 20 40.25C31 40.25 40 31.25 40 20.25C40 15 37.75 10 34 6.25ZM20 37C17 37 14 36.25 11.5 34.75L11 34.5L4.74998 36.25L6.50002 30.25L5.99998 29.5C4.24998 26.75 3.49998 23.75 3.49998 20.75C3.49998 11.75 11 4.25 20 4.25C24.5 4.25 28.5 6 31.75 9C35 12.25 36.5 16.25 36.5 20.75C36.5 29.5 29.25 37 20 37ZM29 24.5C28.5 24.25 26 23 25.5 23C25 22.75 24.75 22.75 24.5 23.25C24.25 23.75 23.25 24.75 23 25.25C22.75 25.5 22.5 25.5 22 25.5C21.5 25.25 20 24.75 18 23C16.5 21.75 15.5 20 15.25 19.5C15 19 15.25 18.75 15.5 18.5C15.75 18.25 16 18 16.25 17.75C16.5 17.5 16.5 17.25 16.75 17C17 16.75 16.75 16.5 16.75 16.25C16.75 16 15.75 13.5 15.25 12.5C15 11.75 14.5 11.75 14.25 11.75C14 11.75 13.75 11.75 13.25 11.75C13 11.75 12.5 11.75 12 12.25C11.5 12.75 10.25 14 10.25 16.5C10.25 19 12 21.25 12.25 21.75C12.5 22 15.75 27.25 20.75 29.25C25 31 25.75 30.5 26.75 30.5C27.75 30.5 29.75 29.25 30 28.25C30.5 27 30.5 26 30.25 26C30 24.75 29.5 24.75 29 24.5Z" fill="{{popupIconColour}}"/>
+								</svg>
+							{% endif %}
+						</a>
+					{% endif %}
+
+					{% if 'copyURL' in commmaSeparatedMediaOptions and fields.icons.display_copy_url_link == false %}
+						<a class="social-share-copyurl social-media-copylink" data-url="{{copyUrl}}">
+							{% if cta_styles.theme_cta_icons.cta_copy_url_icon is not empty %}
+								<img class="icon" src="{{cta_styles.theme_cta_icons.cta_copy_url_icon}}">
+							{% else %}
+								<svg fill="{{popupIconColour}}" width="{{popupIconSize}}" height="{{popupIconSize}}" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="-200 -200 900 900" xml:space="preserve">
+									<g>
+										<path d="M447.112,37.345C423.031,13.263,391.012,0,356.957,0c-34.057,0-66.075,13.263-90.156,37.345L166.215,137.931l21.213,21.213 L288.013,58.558C306.428,40.143,330.913,30,356.957,30c26.043,0,50.527,10.143,68.942,28.558s28.558,42.899,28.558,68.942c0,26.044-10.143,50.528-28.558,68.943L325.313,297.029l21.213,21.213l100.586-100.586c24.082-24.081,37.345-56.1,37.345-90.156S471.194,61.426,447.112,37.345z"/>
+										<path d="M196.443,425.899c-18.415,18.415-42.899,28.558-68.942,28.558s-50.527-10.143-68.943-28.558C40.142,407.484,30,383,30,356.957c0-26.044,10.142-50.528,28.557-68.943l100.586-100.586l-21.213-21.213L37.344,266.801C13.263,290.882,0,322.9,0,356.957c0,34.056,13.263,66.074,37.344,90.155c24.082,24.082,56.1,37.345,90.156,37.345s66.075-13.263,90.156-37.345l100.586-100.586l-21.213-21.213L196.443,425.899z"/>
+										<path d="M321.688,141.552l21.213,21.213L162.768,342.898l-21.213-21.213L321.688,141.552z"/>
+									</g>
+								</svg>
+							{% endif %}
+						</a>
+					{% endif %}
+
+				</div>
+
+				{% if 'copyURL' in commmaSeparatedMediaOptions and fields.icons.display_copy_url_link == true %}
+					{% if cta_styles.theme_cta_icons.cta_copy_url_icon is not empty %}
+						<div class="copyurl-display-link-wrapper">
+							<span class="copyurl-share-link-display">{{copyUrl}}</span>
+							<a class="copyurl-icon social-media-copylink" data-url="{{copyUrl}}">
+								<img src="{{cta_styles.theme_cta_icons.cta_copy_url_icon}}" alt="Copy URL">
+								<span class="copy-text">Copy</span>
+							</a>
+						</div>
+					{% endif %}
+				{% endif %}
+				<div class="social-media-message">Link copied!</div>
+			</div>
+		</div>
+	</dialog>
+</div>