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

.product-lightbox__variants-options,
.product-lightbox__variants-dropdown {
	.form-legend {
		display: flex;
		font-weight: 600;
		font-size: $font-body;
		margin-bottom: 0.5rem;
	}

	.form-fieldset {
		margin-bottom: 0;
	}

	.multiple-choice-question__answers {
		margin-top: 1rem;
		margin-bottom: 1rem;
		display: flex;
		flex-direction: row;
	}

	.form-label {
		clear: none;
		cursor: pointer;
		display: inline-block;
		position: relative;
		padding-inline-end: 3rem;
	}

	.form-label input[type='radio'] + span {
		font-weight: 600;
		font-size: 1rem;
		margin-inline-start: 1.75rem;
		white-space: nowrap;
	}

	.form-radio {
		width: 1.2rem;
		height: 1.2rem;
		border: 2px solid var( --color-neutral-10 );
	}

	.form-radio:checked::before {
		width: 0.7rem;
		height: 0.7rem;
		margin: 2px;
	}

	.form-radio:checked {
		border: 2px solid var( --color-primary );
	}

	.form-radio:focus {
		&:hover {
			box-shadow: none;
		}

		box-shadow: none;
	}
}

.info-popover.product-lightbox__variants-dropdown--popover {
	height: 24px;
	width: 24px;
}

.product-lightbox__variants-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-start;

	p {
		font-weight: 600;
		font-size: $font-body;
	}
}

.product-lightbox__variants-dropdown-link {
	text-decoration: underline;
}

.product-lightbox__tiers-dropdown {
	margin-bottom: 1rem;

	.select-dropdown__item.is-disabled {
		opacity: 1;
		color: var( --studio-gray-70 );
	}

	.select-dropdown__container {
		width: 100%;
	}
	.select-dropdown__header {
		border: 1px solid var( --studio-gray-10 );
		border-radius: 4px;
	}

	.select-dropdown__header-text,
	.select-dropdown__item {
		font-size: 1rem;
		font-weight: normal;
	}
}

.product-lightbox__variants-plan {
	&-alt-info {
		font-size: $font-body-extra-small;
		color: var( --studio-jetpack-green-50 );
		font-weight: 600;
		display: flex;
		align-items: center;
	}

	&-alt-info--dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		background: var( --studio-jetpack-green-50 );
		border-radius: 50%;
		margin-inline-end: 4px;
	}

	&-card {
		background-color: #fff;
		border-radius: 8px;
		border: 1px solid #008710;
		padding: 1rem;
	}

	&-card-price {
		font-size: 1.5rem;
		font-weight: 700;
		color: #000;
	}

	&-card-old-price {
		color: #101517;
		text-decoration: line-through;
		margin-right: 2px;
	}

	&-card-month-short {
		display: none;
	}
}

.product-lightbox__variants-plan-card:not( :first-child ) {
	margin-top: 1rem;
}

.product-lightbox__variants-plan-card-price,
.product-lightbox__variants-plan-card-old-price {
	h4 {
		display: inherit;
	}
	.plan-price__fraction {
		font-weight: inherit;
		font-size: inherit;
		vertical-align: inherit;
	}
	.plan-price__integer {
		margin: 0;
		font-weight: inherit;
	}
	.plan-price__currency-symbol {
		color: inherit;
		font-size: inherit;
		vertical-align: inherit;
	}
	.plan-price.is-original::before {
		content: none;
	}
	.plan-price {
		margin: 0 0.2rem 0 0;
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}
}

.product-lightbox__variants-grey-label {
	font-size: 0.75rem;
	color: #646970;

	div {
		display: inline-block;
	}

	&.is-placeholder {
		.product-lightbox__variants-plan-card-price {
			@include placeholder( --color-neutral-10 );
		}
	}

	.display-price__billing-time-frame {
		font-size: 0.75rem;
		color: #646970;
	}

	.product-lightbox__variants-timeframe {
		&.is-compact .normal {
			display: none;
		}

		&.is-compact .compact {
			display: inline-block;
		}
	}
}

@media screen and ( max-width: $break-medium ) and ( orientation: portrait ) {
	.product-lightbox__variants-options {
		margin: 0;
	}
}

@media screen and ( max-height: 365px ) and ( orientation: landscape ) {
	.product-lightbox__variants-options {
		margin-top: 0.25rem;
		margin-bottom: 0.5rem;
	}
}

.product-lightbox__checkout-button {
	margin-block-start: 1rem;
	margin-block-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-lightbox__checkout-button .gridicon.gridicons-checkmark {
	transform: rotate( -8.37deg );
	margin-right: 11.46px;
	margin-bottom: 4px;
	color: #008710;
}

.product-lightbox__checkout-button.button:not( [disabled], :disabled, .is-primary ) {
	color: var( --color-neutral-100 );
	border: 1px solid var( --color-neutral-100 );
}

.inactive {
	border: none;
}

// Visually hidden, but acccessible
.jetpack-products-with-variants {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect( 0, 0, 0, 0 ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

// The lightbox z-index is 100200, consequences of updating the popover z-index
// to higher than that are unclear, so we'll manually set it to 100200 here so we
// can see the popover in the lightbox.
.popover.product-lightbox__variants-dropdown--popover {
	z-index: 100200;
}
