/* Przyciski: .btn + .btn--primary | .btn--secondary | .btn--filter (+ .is-active). Kolory: tokens.php. */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	isolation: isolate;
	overflow: hidden;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--btn-border);
	border-radius: 0;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font: 500 var(--btn-fs) / 1.5 var(--font-body);
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease;
}

.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Wypełnienie wsuwane od lewej (używane w trybie "slide koloru"). */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill, transparent);
	transform: translateX(-101%);
	transition: transform var(--dur-slow) var(--ease-out);
}

/*
 * Ikona na końcu przycisku (domyślnie strzałka w prawo), kolor = kolor tekstu.
 * Własne ikony: Ustawienia motywu → Style guide → Przyciski (--icon-arrow-custom, --icon-cart-custom).
 */
.btn--primary::after,
.btn--secondary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--icon-arrow-custom, url("../img/chevron-right.svg")) center / contain no-repeat;
	mask: var(--icon-arrow-custom, url("../img/chevron-right.svg")) center / contain no-repeat;
	transition: transform var(--dur) var(--ease-out);
}

/* Dodaj do koszyka: ta sama zasada, inna ikona. */
.btn--cart::after {
	-webkit-mask-image: var(--icon-cart-custom, url("../img/cart.svg"));
	mask-image: var(--icon-cart-custom, url("../img/cart.svg"));
}

/* Odstępy między przyciskami. */
.btn-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn--primary {
	--btn-bg: var(--btn-primary-bg);
	--btn-fg: var(--btn-primary-text);
	--btn-border: var(--btn-primary-bg);
	--btn-fill: var(--btn-primary-text);
	--btn-fill-fg: var(--btn-primary-bg);
}

.btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--btn-secondary);
	--btn-border: var(--btn-secondary);
	--btn-fill: var(--btn-secondary);
	--btn-fill-fg: var(--color-background);
}

.btn--filter {
	--btn-bg: var(--btn-filter);
	--btn-fg: var(--btn-primary-text);
	--btn-border: var(--btn-filter);
	padding: 0.5rem 1rem;
}

.btn--filter:hover,
.btn--filter.is-active {
	--btn-bg: var(--btn-secondary);
	--btn-border: var(--btn-secondary);
}

/* Hover: slide koloru. */
.btn-hover-color .btn--primary:hover,
.btn-hover-color .btn--secondary:hover { color: var(--btn-fill-fg); }
.btn-hover-color .btn:hover::before { transform: none; }

/* Hover: slide strzałki (tło zmienia się tylko lekko). */
.btn-hover-arrow .btn--primary:hover { --btn-bg: var(--color-black); --btn-border: var(--color-black); }
.btn-hover-arrow .btn--secondary:hover { --btn-bg: var(--color-surface); }

:is(.btn-hover-color, .btn-hover-arrow) .btn:hover::after { transform: translateX(0.25rem); }