@property --angle {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

@property --border-color {
	syntax: '<color>';
	inherits: true;
	initial-value: #B40024;
}

.communications-widget[accordion-disabled=false][active=false] .communications-widget__title	{
	display: flex;
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: white;
	color: #B40024;
	font-size: 14px;
	cursor: pointer;
	overflow-x: visible;
	overflow-y: visible;
	border-radius: 50%;
	box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.15);
	background-color: white;
		align-items: center;

	@media (min-width: 768px) {
		height: 44px;
		width: auto;
		border: none;
		overflow: visible;
		border-radius: 22px;
		box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.15);
	}
}

/* 1. Define the infinite rotation */
@keyframes rotate-border {
	0% { --angle: 0deg; }
	20% {--angle: 360deg; --border-color: #B40024;}
	25% {--angle: 360deg; --border-color: transparent;}
	100% {--angle: 360deg; --border-color: transparent;}
}

@keyframes rotate-border2 {
	0% { --angle: 0deg; }
	7.5% {--angle: 360deg; --border-color: #B40024;}
	14% {--angle: 360deg; --border-color: transparent;}
	100% {--angle: 360deg; --border-color: transparent;}
}

.communications-widget[accordion-disabled=false][active=false] .communications-widget__title img {
	position: relative;
	z-index: 1;
	margin-inline-start: 10px;
	margin-inline-end: 19px
}

.communications-widget[accordion-disabled=false][active=false] .communications-widget__title span {
	padding-inline-start: 16px;
	text-transform: none;
	position: relative;
	z-index: 1;
}

i-link.communications-widget__link .link {
	border-radius: 25px;
	border: 2px solid transparent;
	text-decoration: none;
	
	@media (max-width: 768px) {
		animation: rotate-border2 8s linear infinite;
	}

	background:		
		linear-gradient(white, white) padding-box,
			conic-gradient(
			  from 0deg at 50% 50%,
			  var(--border-color) var(--angle),
			  transparent var(--angle)
			) border-box
		;

	@media (min-width: 768px) {
		background: 
			linear-gradient(white, white) padding-box, 
			conic-gradient(
				from 90deg at 50% 100%, 
				var(--border-color) var(--angle), 
				transparent var(--angle)
			) border-box top / 100% 50% no-repeat,
			conic-gradient(
				from 270deg at 50% 0%, 
				var(--border-color) var(--angle), 
				transparent var(--angle)
			) border-box bottom / 100% 50% no-repeat;
		animation: rotate-border 8s linear infinite;
	}

	transition: none;

	animation-delay: 1s;
}