/* UI components, actions and feedback: Button (sizes, premium, link, loading, disabled), Chip, EmptyState.
   Loaded after base.css. `.is-hover` / `.is-focus` mirror the real states for the component demo page only. */

/* Button sizes: S 36, M 44, L 52 (COMPONENTS 2); the base .btn default (54) stays for hero use */
.btn {
	height: var(--bh, 54px);
	text-decoration: none;
	white-space: nowrap;
}

.btn-s {
	--bh: 36px;
	--c: 10px;
	padding-inline: 18px 14px;
	gap: var(--sp-8);
	font-size: var(--fs-s);
}

.btn-m {
	--bh: 44px;
	--c: 12px;
	padding-inline: 22px 18px;
	gap: var(--sp-12);
}

.btn-l {
	--bh: 52px;
}

.btn-s .arr {
	width: 16px;
	height: 16px;
}

/* focus: the chamfer clips outer outlines, so the ring is drawn inside, over the gold sweep fill */
.btn:focus-visible,
.btn.is-focus {
	outline: var(--focus-width) solid var(--ink-900);
	outline-offset: -6px;
	border-radius: 0;
}

.btn-p.is-hover,
.btn-p.is-focus,
.btn-g.is-hover,
.btn-g.is-focus {
	color: var(--ink-900);
}

/* the skewed sweep fill must start fully outside the plate (the skew pushes its top corner inward) */
.btn::before {
	transform: translateX(calc(var(--dir) * -130%)) skewX(calc(var(--dir) * -20deg));
}

.btn:hover::before,
.btn:focus-visible::before,
.btn.is-hover::before,
.btn.is-focus::before {
	transform: none;
}

.btn:active {
	box-shadow: var(--edge-press);
}

/* Premium: gold, store and pricing only */
.btn-gold {
	background: var(--gold-300);
	color: var(--ink-900);
}

.btn-gold::before {
	background: var(--gold-100);
}

/* Link: text with an underline that measures out */
.btn-link {
	--bh: auto;
	clip-path: none;
	padding: var(--sp-12) 0;
	min-height: 44px;
	background: none;
	color: var(--fg);
	gap: var(--sp-8);
}

.btn-link::before {
	display: none;
}

.btn-link span {
	background: linear-gradient(var(--acc), var(--acc)) 0 100% / 0 2px no-repeat;
	transition: background-size var(--d-fast) var(--ease);
	padding-block-end: 2px;
}

html[dir="rtl"] .btn-link span {
	background-position: 100% 100%;
}

.btn-link:hover span,
.btn-link.is-hover span,
.btn-link:focus-visible span {
	background-size: 100% 2px;
}

.btn-link:focus-visible,
.btn-link.is-focus {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}

/* Disabled: still readable, outline kept at 3:1 */
.btn:disabled,
.btn[aria-disabled="true"] {
	background: var(--surface-solid);
	color: var(--fg2);
	cursor: not-allowed;
	box-shadow: none;
}

.btn:disabled::before,
.btn[aria-disabled="true"]::before {
	display: none;
}

.btn:disabled::after,
.btn[aria-disabled="true"]::after {
	z-index: -2;
	background: var(--ln-ctl);
}

.btn-link:disabled,
.btn-link[aria-disabled="true"] {
	background: none;
	text-decoration: line-through;
}

/* Loading: Streak (3 bars) after the label, label and width kept */
.btn-load {
	display: none;
	gap: 3px;
	align-items: center;
	flex: none;
}

.btn-load i {
	display: block;
	height: 3px;
	background: currentcolor;
	transform-origin: calc(50% - var(--dir) * 50%) 50%;
	animation: streak 0.9s var(--ease-io) infinite;
}

.btn-load i:nth-child(1) {
	width: 18px;
}

.btn-load i:nth-child(2) {
	width: 12px;
	animation-delay: 0.12s;
}

.btn-load i:nth-child(3) {
	width: 6px;
	animation-delay: 0.24s;
}

.btn[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

.btn[aria-busy="true"] .arr {
	display: none;
}

.btn[aria-busy="true"] .btn-load {
	display: inline-flex;
}

@keyframes streak {
	0%,
	100% {
		transform: scaleX(0.25);
	}

	50% {
		transform: scaleX(1);
	}
}

/* Chip / FilterChip: toggle button, selected = accent border + check */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	min-height: 44px;
	padding-inline: var(--sp-16);
	background: transparent;
	color: var(--fg);
	border: var(--hairline) solid var(--ln-ctl);
	border-radius: var(--radius-control);
	font-family: var(--font-mono);
	font-size: var(--fs-m);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background var(--d-fast) var(--ease),
		border-color var(--d-fast) var(--ease);
}

:lang(ar) .chip {
	font-family: var(--font-ar);
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--fs-s-ar);
}

.chip .chk {
	display: none;
	width: 14px;
	height: 14px;
	color: var(--acc-t);
}

.chip:hover,
.chip.is-hover {
	border-color: var(--hi);
}

.chip[aria-pressed="true"] {
	border-color: var(--acc);
	background: var(--hi-wash);
	box-shadow: inset 0 0 0 1px var(--acc);
}

.chip[aria-pressed="true"] .chk {
	display: block;
}

.chip:focus-visible,
.chip.is-focus {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}

.chip:disabled {
	color: var(--fg2);
	border-style: dashed;
	cursor: not-allowed;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
}

/* EmptyState: drawn empty frame, one line, up to two actions */
.empty {
	display: grid;
	justify-items: center;
	gap: var(--sp-16);
	padding: var(--sp-48) var(--sp-24);
	text-align: center;
	border: var(--hairline) dashed var(--ln-s);
	border-radius: var(--radius-plate);
}

.empty svg {
	width: 96px;
	height: 72px;
	color: var(--fg2);
}

.empty p {
	max-inline-size: 42ch;
	color: var(--fg2);
}

.empty-act {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-12);
}