/* Progressive controls for the horizontal product rail on the homepage. */

.product-slider-controls {
	display: none;
}

@media (max-width: 640px) {
	.product-slider-controls:not([hidden]) {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 14px;
	}

	.product-slider-control {
		display: grid;
		width: 48px;
		height: 48px;
		place-items: center;
		padding: 0;
		border: 1px solid var(--color-dark);
		background: #fff;
		color: var(--color-dark);
		transition: background-color .16s, color .16s, opacity .16s;
	}

	.product-slider-control--next {
		background: var(--color-accent);
	}

	.product-slider-control:hover:not(:disabled),
	.product-slider-control:focus-visible:not(:disabled) {
		background: var(--color-dark);
		color: #fff;
	}

	.product-slider-control:disabled {
		border-color: var(--color-line);
		background: var(--color-surface);
		color: var(--color-muted);
		cursor: not-allowed;
		opacity: .5;
	}

	.product-slider-control svg {
		width: 22px;
		height: 22px;
	}

	.product-slider-control--previous svg {
		transform: rotate(180deg);
	}
}