@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.container {
	--padding: calc(var(--spacing-base) * 4);
	--padding-horizontal: calc(var(--spacing-base) * 3);
	--padding-vertical: var(--spacing-base);
	--item-border-color: #f0f0f0;
	color: var(--jp-black);
}

.table {
	--gap: calc(var(--spacing-base) * 3);
	position: relative;
	padding: var(--padding) 0;

	.is-viewport-large & {
		display: grid;
		grid-template-columns: repeat(var(--columns), 1fr);
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--rows), minmax(min-content, max-content));
		column-gap: var(--gap);
	}

	.tableTitle {
		font-size: 32px;
		font-weight: 500;
		line-height: 40px;
		word-wrap: break-word;
	}
}

.header-logo {

	.is-viewport-large & {
		margin-top: 32px;
	}

	margin-bottom: 24px;
}

.card {
	margin-top: var(--padding);

	.is-viewport-large & {
		display: contents;
	}

	// Border styles for all columns (default gray borders)
	> :first-child {
		border-style: solid;
		border-color: var(--item-border-color);
		border-width: 1.5px 1.5px 0;
		border-start-start-radius: 8px;
		border-start-end-radius: 8px;
	}

	> :last-child {
		border-style: solid;
		border-color: var(--item-border-color);
		border-width: 0 1.5px 1.5px;
		border-end-start-radius: 8px;
		border-end-end-radius: 8px;
	}

	> :not(:first-child):not(:last-child) {
		border-inline: 1.5px solid var(--item-border-color);
	}

	> * {
		background: var(--jp-white);
	}

	&.is-primary {

		> * {
			position: relative;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
				box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
			}
		}

		// Primary column with green border and gradient background
		> :first-child {
			border-style: solid;
			border-color: #008710;
			border-width: 1.5px 1.5px 0;
			border-start-start-radius: 8px;
			border-start-end-radius: 8px;

			background-image: url(./gradient.svg);
			background-repeat: no-repeat;
			background-size: 450px;
			background-position-x: center;

			@media (max-width: gb.$break-large) {
				background-position-x: right;
			}
		}

		> :last-child {
			border-style: solid;
			border-color: #008710;
			border-width: 0 1.5px 1.5px;
			border-end-start-radius: 8px;
			border-end-end-radius: 8px;
		}

		> :not(:first-child):not(:last-child) {
			border-inline: 1.5px solid #008710;
		}
	}
}

.headerContainer {
	padding: var(--padding);
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-basis: 100%;
}

.title {
	margin-bottom: 24px;
}

.item {
	display: flex;
	align-items: center;
	padding-bottom: var(--padding-vertical);
	position: relative;
	line-height: 20px;

	&:not(:nth-child(2)):not(.empty) {
		padding-top: var(--padding-vertical);

		&::before {
			content: "";
			position: absolute;
			top: 0;
			inset-inline-start: var(--padding-horizontal);
			inset-inline-end: var(--padding-horizontal);
			height: 1px;

			z-index: 5;
			background-color: var(--jp-gray);
		}

		&.feature {

			&::before {
				inset-inline-start: 0;
				inset-inline-end: calc(var(--padding) - var(--gap));

			}
		}
	}

	&:last-of-type {
		padding-bottom: var(--padding-vertical);
	}
}

.last-feature {
	padding-bottom: var(--padding);
}

.value {
	padding-left: var(--padding-horizontal);
	padding-right: var(--padding-horizontal);
}

.icon {
	margin: 0 var(--spacing-base);
	fill: var(--jp-gray);
	flex-shrink: 0;

	&.icon-check {
		fill: var(--jp-green-40);
	}

	&.icon-cross {
		fill: var(--jp-red-50);
	}
}

.popover {
	margin-left: auto;

	.is-viewport-large & {
		top: 1px;
		margin: 0 var(--spacing-base);
	}
}

.item .popover-icon {
	fill: var(--jp-gray-20);
	flex-shrink: 0;
}

.tos {
	text-align: center;
	width: fit-content;

	> a {
		color: #000;
	}

	.is-viewport-large & {
		padding-left: var(--padding);
		padding-right: var(--padding);
		grid-column: 2;
		white-space: nowrap;
		overflow: hidden;
	}
}

.tos-container {
	display: flex;
	align-items: right;
	justify-content: right;
	margin: 0 calc(var(--spacing-base) * 4);
}
