/* ==========================================================================
   MOOS Tweaks — potwierdzenie dodania do koszyka na samym przycisku.

   Wspólne dla kart motywu na /products/ i dla kart bloku moos/products.
   Logika siedzi w assets/js/moos-cart-feedback.js; tutaj jest tylko wygląd
   dwóch stanów, które ten skrypt włącza klasami:

     .is-moos-swapping — napis przezroczysty, trwa podmiana treści,
     .is-moos-added    — potwierdzenie widoczne.

   O !important niżej: kolor tła przycisku „do koszyka” ustawia w tym sklepie
   kilka miejsc naraz — motyw przez swoje zmienne oraz Additional CSS, w tym
   regułami z własnym !important (`body.woocommerce-shop ul.products li.product
   a.button{background:var(--moos-red)!important}`). Stan potwierdzenia trwa
   sześć sekund i ma wygrywać zawsze, także po dopisaniu kolejnej reguły
   w Additional CSS — to jest ten wyjątek, dla którego !important istnieje.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Link „Zobacz koszyk”, który wc-add-to-cart.js wstawia po przycisku.

   Skrypt go usuwa, ale nasłuch wstawiający jest zapinany później niż nasz, więc
   potrafi zdążyć przed nami — to jest zabezpieczenie na tę jedną klatkę.
   !important, bo Additional CSS ma dla niego własną regułę o wysokiej
   specyficzności (`body.woocommerce-shop ul.products li.product a.added_to_cart`).
   Ta reguła jest teraz martwa i można ją stamtąd skasować.
   ----------------------------------------------------------------------- */

ul.products .added_to_cart,
.moos-products .added_to_cart,
.ct-woo-card-actions .added_to_cart {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Podmiana napisu

   Gaśnie sam napis, nie cały przycisk: `color: transparent` zabiera tekst i —
   przez currentColor — ikony, a tło zostaje na miejscu i płynnie przechodzi
   w zieleń. Fade całego przycisku przez opacity mrugałby także tłem.
   ----------------------------------------------------------------------- */

a.add_to_cart_button,
a.moos-cart-button,
button.moos-cart-button {
	transition: background-color .22s ease, color .18s ease, width .32s cubic-bezier(.2, .7, .3, 1);
}

body ul.products li.product a.button.add_to_cart_button.is-moos-swapping,
a.add_to_cart_button.is-moos-swapping,
a.moos-cart-button.is-moos-swapping,
button.moos-cart-button.is-moos-swapping {
	color: transparent !important;
}

/* --------------------------------------------------------------------------
   Stan potwierdzenia

   Zieleń, nie limonka z tokenów: biały tekst na --moos-lime (#7d9a22) daje
   3.3:1, czyli poniżej 4.5:1 wymaganych dla pisma tej wielkości. #5f7519 to ten
   sam odcień ściemniony do 5.2:1. Hover i focus trzymają ten sam kolor — w tym
   stanie przycisk nie zaprasza do ponownego kliknięcia.
   ----------------------------------------------------------------------- */

/*
 * Długi selektor z `body` na początku nie jest ozdobą. Additional CSS ma
 *
 *   body.woocommerce-shop ul.products li.product a.button,
 *   body.tax-product_cat  ul.products li.product a.button { background: var(--moos-red) !important }
 *
 * czyli 4 elementy + 4 klasy ORAZ !important. Samo !important tu nie wystarczy —
 * przy równej wadze wygrywa to, co stoi w kaskadzie później, a Additional CSS
 * ładuje się po wtyczkach. Dokładamy więc jedną klasę ponad tamto (.is-moos-added
 * przy .button i .add_to_cart_button), i dopiero to wygrywa na stałe.
 *
 * Krótsze warianty niżej obsługują przyciski spoza pętli `ul.products` — tam
 * konkurencji nie ma i nie ma po co podbijać.
 */
body ul.products li.product a.button.add_to_cart_button.is-moos-added,
body ul.products li.product a.button.add_to_cart_button.is-moos-added:hover,
body ul.products li.product a.button.add_to_cart_button.is-moos-added:focus,
a.add_to_cart_button.is-moos-added,
a.add_to_cart_button.is-moos-added:hover,
a.add_to_cart_button.is-moos-added:focus,
a.moos-cart-button.is-moos-added,
a.moos-cart-button.is-moos-added:hover,
a.moos-cart-button.is-moos-added:focus,
button.moos-cart-button.is-moos-added {
	/*
	 * Tylko longhandy, żadnego skrótu `background`. Skrót z var() w środku
	 * przeglądarka odkłada do rozwiązania na później, a stojący po nim
	 * `background-color` zostawiał resztę rodziny pustą — cała deklaracja tła
	 * leciała wtedy do kosza i przycisk zostawał czerwony. Sprawdzone w CSSOM.
	 * background-image gasimy osobno: motyw potrafi tam wstawić gradient, który
	 * przykryłby kolor.
	 */
	background-color: var(--moos-lime-700, #5f7519) !important;
	background-image: none !important;
	color: #fff !important;
	cursor: default;
}

/*
 * Ptaszka na przyciskach motywu tu NIE ma, i to jest decyzja, nie przeoczenie.
 *
 * Blocksy trzyma ::before swoich przycisków na własne ikony i wymusza tam
 * `display: block` — nie oddaje go nawet przy !important. Kolejne obejścia
 * (pozycjonowanie bezwzględne, maska z data URI) też nie chciały się malować,
 * a każde następne to była już kolejna warstwa walki z motywem o element,
 * którego ten motyw używa do czegoś innego.
 *
 * Zielone tło plus „Dodano do koszyka!” niesie ten sam komunikat i nie zależy
 * od niczyjego pseudoelementu. Ptaszek został tam, gdzie naprawdę jest
 * potrzebny: w bloku moos/products, gdzie przycisk bywa samym okrągłym „+”
 * i nie ma miejsca na zdanie — tam jest prawdziwym <span> z SVG w HTML-u,
 * patrz MOOS_Products_Block::cart_button().
 */

/* --------------------------------------------------------------------------
   Ruch
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	a.add_to_cart_button,
	a.moos-cart-button,
	button.moos-cart-button {
		transition: none;
	}

	/* JS i tak pomija przygaszanie przy tym ustawieniu — to jest zabezpieczenie
	   na wypadek, gdyby klasa została dołożona mimo wszystko. */
	a.add_to_cart_button.is-moos-swapping,
	a.moos-cart-button.is-moos-swapping,
	button.moos-cart-button.is-moos-swapping {
		color: inherit !important;
	}
}