/* =========================================================
   Icon System
   Usage:
   - icon-mail | icon-download | icon-phone
   - icon-arrow       … 白丸 + 色付き >
   - icon-arrow-fill  … 色付き丸 + 白 >
   - HTML:  <a class="icon-phone" href="tel:...">
   - Menu:  CSS class on menu item (applied to <li>)
   - Block: CSS class on button block (applied to wrapper)
   Left = mail / download / phone   Right = arrow
========================================================= */

/* Icon target: element that receives the icon pseudo-element */
:is(
	.icon-mail:not(li):not(.wp-block-button),
	.icon-download:not(li):not(.wp-block-button),
	.icon-phone:not(li):not(.wp-block-button),
	.icon-arrow:not(li):not(.wp-block-button),
	.icon-arrow-fill:not(li):not(.wp-block-button),
	li.icon-mail > a,
	li.icon-download > a,
	li.icon-phone > a,
	li.icon-arrow > a,
	li.icon-arrow-fill > a,
	.wp-block-file:has(.wp-block-file__embed) a.wp-block-file__button[download],
	.wp-block-button.icon-mail .wp-block-button__link,
	.wp-block-button.icon-download .wp-block-button__link,
	.wp-block-button.icon-phone .wp-block-button__link,
	.wp-block-button.icon-arrow .wp-block-button__link,
	.wp-block-button.icon-arrow-fill .wp-block-button__link
) {
	display: inline-flex;
	align-items: center;
}

/* Left icons: mail / download / phone */
:is(
	.icon-mail:not(li):not(.wp-block-button),
	.icon-download:not(li):not(.wp-block-button),
	.icon-phone:not(li):not(.wp-block-button),
	li.icon-mail > a,
	li.icon-download > a,
	li.icon-phone > a,
	.wp-block-file:has(.wp-block-file__embed) a.wp-block-file__button[download],
	.wp-block-button.icon-mail .wp-block-button__link,
	.wp-block-button.icon-download .wp-block-button__link,
	.wp-block-button.icon-phone .wp-block-button__link
) {
	gap: 0.5em;
}

:is(
	.icon-mail:not(li):not(.wp-block-button),
	.icon-download:not(li):not(.wp-block-button),
	.icon-phone:not(li):not(.wp-block-button),
	li.icon-mail > a,
	li.icon-download > a,
	li.icon-phone > a,
	.wp-block-file:has(.wp-block-file__embed) a.wp-block-file__button[download],
	.wp-block-button.icon-mail .wp-block-button__link,
	.wp-block-button.icon-download .wp-block-button__link,
	.wp-block-button.icon-phone .wp-block-button__link
)::before {
	content: "";
	display: inline-block;
	flex: 0 0 1.8em;
	width: 1.8em;
	height: 1.8em;
	background-color: currentColor;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.icon-mail:not(li):not(.wp-block-button)::before,
li.icon-mail > a::before,
.wp-block-button.icon-mail .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5C3 5.67 3.67 5 4.5 5h15c.83 0 1.5.67 1.5 1.5v11c0 .83-.67 1.5-1.5 1.5h-15C3.67 19 3 18.33 3 17.5v-11Zm2 .8v.2l7 4.2 7-4.2v-.2H5Zm14 2.4-7 4.2-7-4.2v7.3h14V9.7Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5C3 5.67 3.67 5 4.5 5h15c.83 0 1.5.67 1.5 1.5v11c0 .83-.67 1.5-1.5 1.5h-15C3.67 19 3 18.33 3 17.5v-11Zm2 .8v.2l7 4.2 7-4.2v-.2H5Zm14 2.4-7 4.2-7-4.2v7.3h14V9.7Z'/%3E%3C/svg%3E");
}

.icon-download:not(li):not(.wp-block-button)::before,
li.icon-download > a::before,
.wp-block-file:has(.wp-block-file__embed) a.wp-block-file__button[download]::before,
.wp-block-button.icon-download .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4Zm-5 14h12v2H6v-2Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4Zm-5 14h12v2H6v-2Z'/%3E%3C/svg%3E");
}

.icon-phone:not(li):not(.wp-block-button)::before,
li.icon-phone > a::before,
.wp-block-button.icon-phone .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
}

/* Right icon: arrow (common) */
:is(
	.icon-arrow:not(li):not(.wp-block-button),
	.icon-arrow-fill:not(li):not(.wp-block-button),
	li.icon-arrow > a,
	li.icon-arrow-fill > a,
	.front-more-link,
	.wp-block-button.icon-arrow .wp-block-button__link,
	.wp-block-button.icon-arrow-fill .wp-block-button__link
) {
	gap: 0.5em;
}

:is(
	.icon-arrow:not(li):not(.wp-block-button),
	.icon-arrow-fill:not(li):not(.wp-block-button),
	li.icon-arrow > a,
	li.icon-arrow-fill > a,
	.front-more-link,
	.wp-block-button.icon-arrow .wp-block-button__link,
	.wp-block-button.icon-arrow-fill .wp-block-button__link
)::after {
	content: ">";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 1.45em;
	width: 1.45em;
	height: 1.45em;
	border-radius: 50%;
	font-family: var(--font-family-display);
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
	transition: var(--transition-base);
}

/* icon-arrow: 白丸 + 色付き > */
:is(
	.icon-arrow:not(li):not(.wp-block-button),
	li.icon-arrow > a,
	.front-more-link,
	.wp-block-button.icon-arrow .wp-block-button__link
)::after {
	background-color: #fff;
	color: var(--color-button-bg);
}

:is(.btn-txt, .link-arrow).icon-arrow::after,
.icon-arrow:is(.btn-txt, .link-arrow)::after,
li.icon-arrow.btn-txt > a::after {
	color: currentColor;
}

/* icon-arrow-fill: 色付き丸 + 白 > */
:is(
	.icon-arrow-fill:not(li):not(.wp-block-button),
	li.icon-arrow-fill > a,
	.wp-block-button.icon-arrow-fill .wp-block-button__link
)::after {
	background-color: var(--color-button-bg);
	color: #fff;
}

:is(
	.icon-arrow:not(li):not(.wp-block-button),
	.icon-arrow-fill:not(li):not(.wp-block-button),
	li.icon-arrow > a,
	li.icon-arrow-fill > a,
	.front-more-link,
	.wp-block-button.icon-arrow .wp-block-button__link,
	.wp-block-button.icon-arrow-fill .wp-block-button__link
):hover::after {
	transform: translateX(2px);
}

:is(
	.icon-arrow-fill:not(li):not(.wp-block-button),
	li.icon-arrow-fill > a,
	.wp-block-button.icon-arrow-fill .wp-block-button__link,
	.btn-txt.icon-arrow-fill,
	.icon-arrow-fill.btn-txt
):hover::after {
	background-color: var(--color-accent);
}