$font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light",
	"Helvetica Neue", sans-serif;

.woocommerce-product-usage-notice {
	border-radius: none;
	font-family: $font-sf-pro-text;

	.components-modal {
		&__content {
			margin: 0;
			padding: 0;
		}
		&__header {
			height: 0;
			padding: 0;

			.components-button {
				top: 40px;
				left: -20px;
			}
		}
	}

	.components-card {
		box-shadow: none;

		&.primary {
			padding: 40px;
			max-width: 468px;
		}

		&.secondary {
			background-color: #faf7f3;
			height: 100%;
			min-width: 392px;
		}

		.subscription-status {
			border-radius: 2px;
			font-size: 12px;
			font-weight: 400;
			line-height: 16px;
			padding: 6px;

			&__expired {
				color: var(--wp-red-red-70, #8a2424);
				background: var(--wp-red-red-0, #fcf0f1);
			}
		}

		&__header,
		&__body,
		&__footer {
			border: none;
			display: flex;
			gap: $gap;
			padding: 0;
		}

		&__header {
			align-items: stretch;
			flex-direction: column;
			padding-bottom: 40px;
			h2 {
				font-size: 24px;
				font-weight: 400;
				line-height: 35px;
				margin: 0;
			}
		}
		&__body {
			padding-bottom: 40px;
			h3 {
				font-size: 16px;
				line-height: 24px;
				margin: 0;
			}
		}
		&__footer {
			justify-content: right;

			.is-secondary,
			.is-secondary:hover {
				box-shadow: none;
			}
		}

		&__media {
			align-items: center;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
		}
	}
}

.woocommerce-subscription-benefits {
	display: flex;
	flex-direction: column;
	gap: $gap-large;

	&__item {
		display: flex;
		flex-direction: row;
		gap: $gap;
		text-decoration: none;
	}

	&__icon {
		display: flex;
		align-items: baseline;
		padding: 0;
		svg {
			fill: #1e1e1e;
		}
	}

	&__content {
		display: flex;
		flex-direction: column;
		gap: $gap-smallest;
	}
	&__content h4 {
		color: #1e1e1e;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
	}
	&__content p {
		color: #757575;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
	}
}