.ccma-inline-round-block {
	--ccma-inline-round-bg-color: var(--wp--preset--color--base, #f7f1e1);
	--ccma-inline-round-text-color: var(--wp--preset--color--vert, #6a855a);
	--ccma-inline-round-icon-color: var(--ccma-inline-round-text-color);
	--ccma-inline-round-icon-width: 27px;
	--ccma-inline-round-icon-height: var(--ccma-inline-round-icon-width);
	--ccma-inline-round-min-height: 56px;
	--ccma-inline-round-radius: 15px;
	--ccma-inline-round-padding-y: 8px;
	--ccma-inline-round-padding-left: 22px;
	--ccma-inline-round-padding-right: 18px;
	--ccma-inline-round-gap: 16px;
	--ccma-inline-round-font-size: clamp(1rem, 0.92rem + 0.42vw, 1.34rem);

	display: inline-flex;
	max-width: 100%;
	vertical-align: middle;
	box-sizing: border-box;
	color: var(--ccma-inline-round-text-color);
}

.ccma-inline-round-clickable-block {
	cursor: pointer;
}

.ccma-inline-round-clickable-block:focus {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: var(--ccma-inline-round-radius);
}

.ccma-inline-round-inner {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ccma-inline-round-gap);
	min-height: var(--ccma-inline-round-min-height);
	max-width: 100%;
	padding: var(--ccma-inline-round-padding-y) var(--ccma-inline-round-padding-right) var(--ccma-inline-round-padding-y) var(--ccma-inline-round-padding-left);
	border-radius: var(--ccma-inline-round-radius);
	border: 2px solid var(--ccma-inline-round-text-color);
	background: var(--ccma-inline-round-bg-color);
	color: var(--ccma-inline-round-text-color);
	box-sizing: border-box;
	line-height: 1;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.ccma-inline-round-label {
	display: block;
	min-width: 0;
	max-width: 100%;
	font-family: var(--wp--preset--font-family--manrope, inherit);
	font-size: var(--ccma-inline-round-font-size);
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.035em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: currentColor;
}

.ccma-inline-round-icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 var(--ccma-inline-round-icon-width);
	width: var(--ccma-inline-round-icon-width);
	height: var(--ccma-inline-round-icon-height);
	line-height: 0;
	color: var(--ccma-inline-round-icon-color);
	transform-origin: center center;
	transition: transform 180ms ease;
}

.ccma-inline-round-asset {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	overflow: visible;
}

.ccma-inline-round-theme-colors .ccma-inline-round-icon .ccma-inline-round-asset,
.ccma-inline-round-theme-colors .ccma-inline-round-icon .ccma-inline-round-asset * {
	color: inherit;
}

.ccma-inline-round-theme-colors .ccma-inline-round-icon .ccma-inline-round-asset [fill]:not([fill="none"]),
.ccma-inline-round-theme-colors .ccma-inline-round-icon .ccma-inline-round-asset path:not([fill="none"]),
.ccma-inline-round-theme-colors .ccma-inline-round-icon .ccma-inline-round-asset rect:not([fill="none"]),
.ccma-inline-round-theme-colors .ccma-inline-round-icon .ccma-inline-round-asset circle:not([fill="none"]) {
	fill: currentColor !important;
}

.ccma-inline-round-theme-colors .ccma-inline-round-icon .ccma-inline-round-asset [stroke]:not([stroke="none"]) {
	stroke: currentColor !important;
}

.ccma-inline-round-clickable-block:hover .ccma-inline-round-inner,
.ccma-inline-round-clickable-block:focus-visible .ccma-inline-round-inner {
	/*transform: translateY(-1px);*/
	/*box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);*/
}

.ccma-inline-round-clickable-block:hover .ccma-inline-round-icon,
.ccma-inline-round-clickable-block:focus-visible .ccma-inline-round-icon {
	animation: ccma-inline-round-icon-pop 420ms ease-out 1;
}

.ccma-inline-round-no-label .ccma-inline-round-inner {
	justify-content: center;
	min-width: var(--ccma-inline-round-min-height);
	padding: 14px;
}

@keyframes ccma-inline-round-icon-pop {
	0% {
		transform: translateX(0) scale(1) rotate(0deg);
	}
	35% {
		transform: translateX(2px) scale(1.06) rotate(1deg);
	}
	70% {
		transform: translateX(-1px) scale(0.99) rotate(-0.5deg);
	}
	100% {
		transform: translateX(0) scale(1) rotate(0deg);
	}
}

@media (max-width: 480px) {
	.ccma-inline-round-block {
		--ccma-inline-round-min-height: 52px;
		--ccma-inline-round-padding-left: 18px;
		--ccma-inline-round-padding-right: 15px;
		--ccma-inline-round-gap: 12px;
	}

	.ccma-inline-round-label {
		white-space: normal;
	}
}
