/* ─── Button icons (global, atomic) ───────────
   Mask-image + currentColor → ikona dziedziczy kolor tekstu buttona,
   więc działa tak samo dla wariantów: primary (białe), ghost (ciemne),
   red (białe). Nie używamy <img> bo nie da się go pokolorować z CSS.

   Ścieżki url() są relatywne do skompilowanego styles/theme.css → ../assets/. */
.wp-block-button__link::before {
    content: "";
    width: var(--wp--custom--size--icon--md);
    height: var(--wp--custom--size--icon--md);
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    display: none;
    /* Domyślnie ukryty — pokazujemy tylko dla wariantów z ikoną
       (tel: link, is-style-catalog itd.). */
}

/* Telefon — KAŻDY button z href="tel:..." dostaje ikonę słuchawki przed
   tekstem. Atomic: regulacja po atrybucie linka, nie po klasie sekcji. */
.wp-block-button__link[href^="tel:"]::before {
    display: inline-block;
    -webkit-mask-image: url("../assets/icons/phone-blue.svg");
    mask-image: url("../assets/icons/phone-blue.svg");
}

/* Katalog — block style is-style-catalog (zarejestrowany w
   inc/blocks/styles.php) dostaje ikonę gridu przed tekstem. */
.wp-block-button.is-style-catalog .wp-block-button__link::before {
    display: inline-block;
    -webkit-mask-image: url("../assets/icons/catalog.svg");
    mask-image: url("../assets/icons/catalog.svg");
}

/* Strzałka — block style is-style-arrow. Dodaje ikonkę → ZA tekstem buttona.
   Mask-image + currentColor — arrow dziedziczy kolor tekstu, więc działa
   z każdym wariantem koloru (primary, ghost, red, catalog). */
.wp-block-button.is-style-arrow .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: var(--wp--custom--size--icon--md);
    height: var(--wp--custom--size--icon--md);
    margin-left: 8px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("../assets/icons/arrow-right.svg");
    mask-image: url("../assets/icons/arrow-right.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
    transition: transform 0.15s ease;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-arrow .wp-block-button__link:focus::after {
    transform: translateX(3px);
}