/*
 * The switch between the two looks of the top-up lists, and the strip's
 * arrows (Catalog\AddonLook). The looks themselves live with their blocks.
 */

/* --- the switch: one quiet line over the tray ------------------------------ */

.gsl-look {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30) calc(-1 * var(--wp--preset--spacing--10));
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.gsl-look__label {
	margin-inline-end: auto;
}

.gsl-look__btn {
	min-height: 32px;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	position: relative;
}

/* 32px to look at, 44px to hit. */
.gsl-look__btn::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

.gsl-look__btn[aria-pressed="true"] {
	border-color: var(--wp--preset--color--brand-action);
	background: var(--wp--preset--color--brand-wash);
	color: var(--wp--preset--color--brand-text);
}

/* --- the arrows: the strip on a desktop ------------------------------------ */

.gsl-look__nav {
	display: none;
}

@media (min-width: 782px) {
	.gsl-look-rail .gsl-look__nav {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		gap: var(--wp--preset--spacing--10);
	}
}

.gsl-look__arrow {
	width: 28px;
	height: 28px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--price);
	line-height: 1;
	cursor: pointer;
}

.gsl-look__arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--brand-text);
}

.gsl-look__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* The tray keeps its padding in the strip look; the arrows line up with its title. */
@media (min-width: 782px) {
	.gsl-look-rail .gsl-bt > .gsl-look__nav {
		top: var(--wp--preset--spacing--30);
	}
}