@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

$woocommerce-purple-50: #720eec;

.product-card {
	display: flex;
	justify-content: stretch;
	min-height: 270px;
	height: 100%;

	&.disabled {
		opacity: 0.5;

		.product-card__inner {
			cursor: not-allowed;
		}
	}

	// Override discount text color with success color
	.product-price-with-discount__price .product-price-with-discount__price-discount {
		color: var( --color-success );
	}
}

.product-card__inner {
	flex-grow: 1;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var( --color-neutral-10 );
	border-radius: 4px;
	user-select: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;

	@include break-xlarge {
		padding: 1.75rem;
	}
}

.product-card:hover,
.product-card:focus-within,
.product-card.selected {
	.product-card__inner {
		border: 1px solid var( --color-border-light );
		background: var( --color-border-light );
		box-shadow: 0 0 40px rgba( 0, 0, 0, 0.08 );
	}
}

.product-card:focus-visible .components-button {
	box-shadow:
		inset 0 0 0 1px var( --color-surface ),
		0 0 0 var( --wp-admin-border-width-focus ) var( --color-accent );
}

@mixin product-card-block__details {
	flex-wrap: wrap;
	align-items: flex-start;
}

@mixin product-card-line__details {
	align-items: center;
	flex-wrap: nowrap;
}

.product-card__details {
	display: flex;
	justify-content: space-between;

	@include product-card-block__details;

	@include break-mobile {
		@include product-card-line__details;
	}

	@include breakpoint-deprecated( '>660px' ) {
		@include product-card-block__details;
	}

	@include break-medium {
		@include product-card-line__details;
	}

	@include break-xlarge {
		@include product-card-block__details;
	}
}

.product-card__main {
	display: block;
	width: 100%;

	@include breakpoint-deprecated( '>660px' ) {
		display: flex;
		justify-content: space-between;
		gap: 0.5rem;
	}
}

.product-card__buttons {
	display: inline-flex;
	gap: 1rem;
	justify-content: center;
	align-self: flex-start;
	margin-block-start: auto;
	padding-block-start: 1rem;

	@include breakpoint-deprecated( '<660px' ) {
		.button {
			padding: 4px;
		}
	}
}

.product-card__select-button {
	display: block;
	justify-content: center;
	text-align: center;
	@include body-large;

	@include breakpoint-deprecated( '>660px' ) {
		padding: 7px 12px;
		@include heading-medium;
		height: 2rem;
	}
}

.product-card__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

@mixin product-card-block__title {
	flex: 0 1 calc( 100% - 34px );
}

@mixin product-card-line__title {
	flex: 1 1 0;
}

.product-card__title {
	@include heading-x-large;
	color: var( --color-neutral-80 );

	@include product-card-block__title;

	@include break-mobile {
		@include product-card-line__title;
	}

	@include breakpoint-deprecated( '>660px' ) {
		@include product-card-block__title;
	}

	@include break-medium {
		@include product-card-line__title;
	}

	@include break-xlarge {
		@include product-card-block__title;
	}
}

.product-card__description {
	@include body-large;
	color: var( --color-neutral-60 );
	margin: 8px 0;
}

@mixin product-card-block__pricing {
	flex-basis: 100%;
	margin: 1rem 0 0;
	text-align: left;
}

@mixin product-card-line__pricing {
	flex-basis: auto;
	margin: 0 0 0 1rem;
	text-align: right;
}

.product-card__pricing:not( .is-compact ) {
	@include product-card-block__pricing;

	@include break-mobile {
		@include product-card-line__pricing;
	}

	@include breakpoint-deprecated( '>660px' ) {
		@include product-card-block__pricing;
	}

	@include break-medium {
		@include product-card-line__pricing;
	}

	@include break-xlarge {
		@include product-card-block__pricing;
	}
}

.product-card__pricing.is-compact {
	margin: 1rem 0 0;
	max-width: 200px;
}

.product-card .multiple-choice-question {
	margin-block-start: 16px;
	margin-block-end: 0;

	.form-legend {
		display: none;
	}

	.multiple-choice-question__answers {
		display: flex;
		gap: 36px;
	}

	.multiple-choice-question__answer-item-content {
		margin: 0;
	}

	.form-label {
		@include body-large;
		margin: 0;
	}

	.form-radio:checked::before {
		background: var( --color-link );
	}
}

.products-overview {
	.product-card__heading {
		gap: 12px;
	}

	.product-card__inner {
		border-radius: 8px;
		border-color: #ddd;
		padding: 16px;
	}

	.product-card__title {
		@include heading-large;
	}

	.product-price-with-discount__price {
		@include heading-x-large;
	}

	.product-price-with-discount__price-interval {
		@include body-medium;
	}

	.product-card__pricing {
		margin: 0;
	}

	.product-card__description {
		@include body-large;

		color: var( --color-neutral-80 );
		margin: 0;
	}

	// TODO: Create a new component for
	// this on A4A when we remove the feature flag
	.license-lightbox-link {
		@include body-medium;

		text-decoration: none;
		color: var( --color-primary );
	}
}

.product-card__types {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 4px;
}

.product-card.is-woopayments,
.product-card.is-woopayments:hover,
.product-card.is-woopayments:focus,
.product-card.is-woopayments:active {
	.product-card__inner {
		background: $woocommerce-purple-50
			url( calypso/assets/images/a8c-for-agencies/woo-product-card-bg.svg ) no-repeat bottom right;
		border-color: $woocommerce-purple-50;
	}

	.product-card__title,
	.product-card__description,
	.license-lightbox-link {
		color: var( --color-text-inverted );
	}

	.product-card__title {
		@include heading-x-large;
	}

	.product-card__description {
		@include body-large;

		@include break-large {
			margin-block-end: 32px;
		}
	}

	.product-card__select-button.is-primary:not( :disabled ) {
		&,
		&:focus,
		&:focus-visible {
			color: $woocommerce-purple-50;
			background-color: var( --color-surface );
			border: none;
			outline: none;
			box-shadow: none;
		}

		&.is-selected {
			background-color: $woocommerce-purple-50;
			color: var( --color-text-inverted );
			border: 1px solid var( --color-surface );
		}
	}

	.license-lightbox-link {
		padding-inline: 8px;
	}
}
