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

.pricing-card {
	@include glass.bg-glass;

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

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

	&-description {
		color: var(--neutral-6);
	}

	&-pricing-statement {
		color: var(--neutral-4);
		font-family: var(--txt-code-family);
		margin-bottom: calc(-1 * var(--spacing-extra-small));
	}

	&-pricing-suffix {
		color: var(--neutral-4);
		font-family: var(--txt-code-family);
		margin-top: calc(-1 * var(--spacing-extra-small));
	}

	&-features-label {
		font-family: var(--txt-code-family);
		color: var(--neutral-6);
	}

	&-feature-label {
		color: var(--neutral-6);
	}

	&-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);
	}

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