@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.license-product-card {
	display: flex;
	justify-content: stretch;

	&.disabled {
		opacity: 0.5;

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

.license-product-card__inner {
	flex-grow: 1;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--studio-gray-10);
	border-radius: 4px;
	user-select: none;
	cursor: pointer;

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

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

.license-product-card:focus-visible .license-product-card__select-button {
	outline: var(--studio-gray-10) solid 2px;
}

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

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

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

	@include license-product-card-block__details;

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

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

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

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

@mixin license-product-card-block__main {
	justify-content: space-between;
	gap: 0.5rem;
}

@mixin license-product-card-line__main {
	justify-content: flex-start;
}

.license-product-card__main {
	display: flex;
	width: 100%;

	@include license-product-card-block__main;

	@include break-mobile {
		@include license-product-card-line__main;
	}

	@include breakpoint-deprecated( ">660px" ) {
		@include license-product-card-block__main;
	}

	@include break-medium {
		@include license-product-card-line__main;
	}

	@include break-xlarge {
		@include license-product-card-block__main;
	}
}

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

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

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

.license-product-card__title {
	font-size: 1.5rem;
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1.5rem;
	color: var(--studio-gray-80);

	@include license-product-card-block__title;

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

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

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

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

.license-product-card__description {
	font-size: 1rem;
	color: var(--studio-gray-60);
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1.5rem;
	margin: 8px 0;
}

@mixin license-product-card-block__select-button {
	order: initial;
	margin-right: 0;
}

@mixin license-product-card-line__select-button {
	order: -1;
	margin-right: 1rem;
}

.license-product-card__select-button {
	min-width: 20px;
	max-height: 20px;
	border: 2px solid var(--studio-black);
	border-radius: 12px; /* stylelint-disable-line scales/radii */
	text-align: center;

	@include license-product-card-block__select-button;

	@include break-mobile {
		@include license-product-card-line__select-button;
	}

	@include breakpoint-deprecated( ">660px" ) {
		@include license-product-card-block__select-button;
	}

	@include break-medium {
		@include license-product-card-line__select-button;
	}

	@include break-xlarge {
		@include license-product-card-block__select-button;
	}
}

.license-product-card_multi-select {
	border-radius: 2px;
}

.license-product-card__select-button .gridicon {
	color: #fff;
	position: relative;
	top: -2px;
	left: 0;
	width: 14px;
}

.license-product-card.selected .license-product-card__select-button {
	border: 2px solid  var(--color-link);
	background: var(--color-link);
}

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

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

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

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

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

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

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

.license-product-card__pricing.is-compact {
	margin: 1rem 0 0;
}

.license-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 {
		font-size: 1rem;
		line-height: 1.2;
		margin: 0;
	}

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

