@use '../../base/mixins/glass' as glass;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;

.plans-comparison {
	&-card {
		@include glass.bg-glass;

		border: 1px solid with-opacity(var(--neutral-6), 30);
		border-radius: var(--radius-small);
		padding: var(--padding-small);

		&-subgrid {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			gap: var(--spacing-extra-small);
		}

		&-pricing-suffix {
			color: var(--neutral-4);
			font-family: var(--txt-code-family);
		}

		&-highlighted {
			background:
				linear-gradient(var(--ui-fill), var(--ui-fill)) padding-box,
				linear-gradient(
						to bottom right,
						var(--color-bubblegum),
						var(--color-electric-blue)
					)
					border-box;
			border: 0.0625rem solid transparent;
			backdrop-filter: blur(var(--radius-extra-large));
			box-shadow: 0 var(--radius-medium) var(--padding-extra-large)
				var(--color-dark-purple);
		}
	}

	// The header wraps the card row and is what sticks to the top of the page
	// (kept separate from the body so on mobile it can stick while the body scrolls
	// horizontally beneath it — see the mobile block below).
	&-header {
		position: sticky;
		top: calc(var(--padding-huge) + var(--padding-small));
		z-index: 5;
		background: transparent;
	}

	&-card-grid {
		.d-grid {
			margin-right: 0;
		}
	}
}

.plans-comparison-accordion {
	margin-top: var(--padding-small);
	display: flex;
	flex-direction: column;
	gap: var(--padding-extra-small);

	&-trigger {
		background: var(--ui-fill);
		border-radius: var(--radius-small);
		padding: var(--padding-small);
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		cursor: pointer;

		.plans-comparison-accordion-chevron {
			transform: rotate(90deg);
			transition: transform var(--transition-fast);

			&.open {
				transform: rotate(-90deg);
			}
		}
	}

	&-content {
		display: none;

		&.open {
			display: block;
			padding-left: var(--padding-small);
		}

		&-feature {
			display: flex;
			align-items: center;
			border-bottom: 0.0625rem solid var(--color-dark-grey);
			padding: var(--padding-small) 0;

			&:last-child {
				border-bottom: none;
			}

			&-label {
				flex: 1 1 0%;
				min-width: 0;
				color: var(--neutral-6);
				display: flex;
				align-items: center;
				gap: var(--padding-extra-small);
			}

			&-values {
				flex: 0 0 auto;
				width: calc(var(--content-max) / 12 * 8);
				max-width: 100%;
			}

			&-value {
				display: flex;
				justify-content: center;
				align-items: center;

				.button {
					padding: 0;
					font-weight: 500;
				}
			}

			.feature-checkmark::after {
				color: var(--color-pink);
			}
		}
	}
}

// Mobile: the plans comparison becomes a single horizontally scrollable table.
// By default brand-ui's Grid adds `mobile:grid-cols-1`, which collapses both the
// card header row and every feature row to one column — the sticky card stack
// then hovers over and hides the accordion. Instead we keep the plan columns
// side-by-side at a fixed width, scroll the whole table horizontally, and pin the
// feature-label column to the left so each row stays identifiable while scrolling.
// Layout per row is `[label column][plan][plan]…`: the first grid track is sized
// for the label column and the rest are auto-sized, so the column count never
// needs to be hard-coded. The header cards and feature values share --cmp-col-w,
// so each card sits directly above its values.

// Hidden by default (and so removed from the card grid, keeping the desktop
// column count); only shown as the mobile sticky label-column header.
.plans-comparison-card-spacer {
	display: none;
}

.plans-comparison {
	@include break.max-mobile {
		--cmp-label-w: 8rem;
		--cmp-col-w: 9.5rem;
		--cmp-gap: var(--padding-extra-small);

		// Header (card row) and body (features) are independent horizontal scrollers
		// kept in sync by JS. The header stays sticky to the top of the page (it sits
		// outside the body's scroll container, so `position: sticky` resolves against
		// the page) while the feature rows scroll beneath it. Opaque background so
		// those rows scroll cleanly under it.
		.plans-comparison-header {
			overflow-x: auto;
			overscroll-behavior-x: contain;
			background: var(--default);

			// Extend the opaque backing up into the space between the fixed nav and the
			// stuck cards so feature rows don't peek through there. It's exactly the
			// heading's bottom margin (--padding-huge) tall, so when the header isn't
			// stuck it sits within that margin and stays invisible.
			box-shadow: 0 calc(-1 * var(--padding-huge)) 0 0 var(--default);
		}

		.plans-comparison-body {
			overflow-x: auto;
			overscroll-behavior-x: contain;
		}

		// Lay the cards out as fixed-width columns after the label column (the tall
		// single-column stack that used to hover over the accordion is gone).
		.plans-comparison-card-grid {
			width: max-content;

			.d-grid {
				width: max-content;
				max-width: none;
				margin: 0;
				grid-template-columns: var(--cmp-label-w);
				grid-auto-flow: column;
				grid-auto-columns: var(--cmp-col-w);
				gap: var(--cmp-gap);
			}
		}

		// Match the body width to the columns so the group-header bars span the full
		// table and every row scrolls together.
		.plans-comparison-accordion {
			width: max-content;
		}

		.plans-comparison-card-spacer {
			display: block;
			grid-row: span 3;
			position: sticky;
			left: 0;
			z-index: 3;
			background: var(--default);
			border-right: 0.0625rem solid var(--color-dark-grey);
		}

		// The outer glow doesn't survive a horizontal scroll container (it gets
		// clipped, and bleeds into the corner when the card scrolls off-screen). The
		// gradient border already marks the highlighted plan, so drop the glow here.
		.plans-comparison-card-highlighted {
			box-shadow: none;
		}
	}
}

.plans-comparison-accordion {
	@include break.max-mobile {
		// Group header: the bar scrolls with the table, but pin its label and toggle
		// to the viewport edges so they stay visible while the plan columns scroll
		// horizontally. (The bar itself can't be sticky — it fills its track, leaving
		// no room to offset — so we pin its contents over its uniform background.)
		&-trigger-label {
			position: sticky;

			// Offset by the trigger's own padding so the pinned label keeps its inset
			// (no sideways jump when it starts sticking).
			left: var(--padding-small);
		}

		&-chevron {
			position: sticky;
			right: var(--padding-small);
		}

		&-content.open {
			padding-left: 0;
		}

		// Feature row: label column + the value columns, sharing --cmp-col-w so they
		// align with the header cards above.
		&-content-feature {
			display: grid;
			grid-template-columns: var(--cmp-label-w) max-content;
			gap: var(--cmp-gap);
			align-items: stretch;
			width: max-content;
		}

		// Pin the label so the row stays identifiable while scrolling plan columns.
		&-content-feature-label {
			position: sticky;
			left: 0;
			z-index: 1;
			background: var(--default);
			border-right: 0.0625rem solid var(--color-dark-grey);
			padding-right: var(--cmp-gap);
		}

		&-content-feature-values {
			width: auto;
			max-width: none;

			.d-grid {
				width: max-content;
				grid-template-columns: none;
				grid-auto-flow: column;
				grid-auto-columns: var(--cmp-col-w);
				gap: var(--cmp-gap);
			}
		}
	}
}