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

.pressable-overview-plan-selection {
	width: 100%;

	@include break-large {
		width: 800px;
		margin-inline: auto;
	}
}

.pressable-overview-plan-selection__details {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	margin-block: 56px 64px;
	row-gap: 32px;

	@include break-large {
		grid-template-columns: repeat( 2, 1fr );
		column-gap: 32px;
		row-gap: 8px;

		> * {
			// Make items span full width if they're the only child
			grid-column: auto / span 2;
		}

		// If there are 2 or more children, reset the grid span
		> *:nth-child( 1 ):nth-last-child( n + 2 ),
		> *:nth-child( 2 ):nth-last-child( n + 2 ) {
			grid-column: auto / span 1;
		}
	}
}

.pressable-overview-plan-selection__details-hint {
	@include body-medium;
}

.pressable-overview-plan-selection__details-card {
	border-radius: 4px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.pressable-overview-plan-selection__details-card:not( .is-aside ) {
	background: var( --color-light-backdrop );
}

.pressable-overview-plan-selection__details-card.is-aside {
	border: 1px solid var( --color-neutral-5 );
}

.pressable-overview-plan-selection__details-card-header-title {
	@include heading-large;
}

.pressable-overview-plan-selection__details-card-header-coming-soon {
	@include heading-medium;
}

.pressable-overview-plan-selection__details-card-header-subtitle {
	@include body-medium;

	&.is-regular-ownership {
		padding-block-start: 32px;
	}

	&.is-refer-mode {
		@include body-small;
		padding-block-end: 16px;
	}
}

.pressable-overview-plan-selection__details-card-header-price {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pressable-overview-plan-selection__details-card-header-price-value {
	@include heading-x-large;
	display: block;
}

.pressable-overview-plan-selection__details-card-header-price-interval {
	@include body-medium;
	color: var( --color-neutral-60 );
}

.pressable-overview-plan-selection__details-card-cta-button {
	display: flex;
	justify-content: center;
	border-radius: 4px;
	@include heading-medium;
	min-height: 40px;
}

.pressable-overview-plan-selection__filter-owned-plan {
	text-align: center;

	.badge {
		display: inline-flex;
		flex-direction: row;
		gap: 16px;

		background-color: var( --color-neutral-0 );
		padding: 8px 16px;
		margin: 0 auto 32px;
		border-radius: 4px;

		align-items: center;
		justify-content: center;
	}
}

.pressable-overview-plan-selection__filter-type {
	display: flex;
	flex-direction: row;
	gap: 16px;

	align-items: center;
	justify-content: center;

	.pressable-overview-plan-selection__filter-label {
		@include heading-medium;
		margin: 0;
	}

	.pressable-overview-plan-selection__filter-radio-control {
		.components-base-control__label {
			display: none;
		}

		.components-radio-control__label {
			text-align: start;
		}

		.components-radio-control__group-wrapper {
			display: flex;
			flex-direction: column;
			gap: 16px;
			padding: 16px;

			border-radius: 8px;
			background-color: var( --color-neutral-0 );

			@include break-large {
				flex-direction: row;
				gap: 24px;
			}
		}

		.components-radio-control__input[type='radio']:checked {
			background-color: var( --color-primary-50 );
		}
	}

	@include breakpoint-deprecated( '<660px' ) {
		display: block;
		margin: 0;
		text-align: center;

		.pressable-overview-plan-selection__filter-label {
			width: 100%;
			margin-block-end: 0.5rem;
		}

		.pressable-overview-plan-selection__filter-buttons {
			display: inline-flex;
			justify-content: space-around;
			width: 100%;
			button {
				width: 50%;
				text-align: center;
				justify-content: center;
			}
		}
	}
}

.theme-a8c-for-agencies .components-button.pressable-overview-plan-selection__filter-button {
	border: 1.5px solid var( --color-surface-backdrop );
	@include heading-medium;

	/* stylelint-disable-next-line scales/radii */
	border-radius: 29px;
	padding: 6px 12px;

	&:focus {
		box-shadow: none;
	}

	&:focus-visible {
		background: var( --color-neutral-60 );
		color: var( --color-text-inverted );
	}
}

.pressable-overview-plan-selection__filter {
	.a4a-slider {
		margin-block-start: 16px;
	}

	.a4a-slider__marker-label {
		height: 0.95rem;
	}
}

.a4a-pressable-filter-wrapper-visits {
	@include breakpoint-deprecated( '<660px' ) {
		.a4a-slider__marker-label {
			@include body-medium;
		}
	}
}

.pressable-overview-plan-selection__filter.is-placeholder {
	.pressable-overview-plan-selection__filter-type,
	.pressable-overview-plan-selection__filter-slider {
		animation: loading-fade 1.6s ease-in-out infinite;
		background: var( --color-neutral-10 );
		border-radius: 4px;
	}

	.pressable-overview-plan-selection__filter-type {
		max-width: 350px;
		width: 100%;
		height: 36px;
		margin: 0 auto 8px;
	}

	.pressable-overview-plan-selection__filter-slider {
		max-width: 800px;
		width: 100%;
		height: 53.2px;
		margin: 0 auto;
	}
}

.pressable-overview-plan-selection__details.is-loader {
	display: flex;
	justify-content: space-between;
	max-width: 800px;

	.pressable-overview-plan-selection__details-card {
		animation: loading-fade 1.6s ease-in-out infinite;
		background: var( --color-neutral-10 );
		border-radius: 4px;
		max-width: 350px;
		height: 256px;
	}
}

.is-new-hosting-page.pressable-overview-plan-selection {
	@include break-huge {
		width: 1000px;
	}

	.pressable-overview-plan-selection__upgrade-title {
		@include heading-2x-large;
		text-align: center;
		margin-block: 56px 32px;

		&.narrow {
			margin-block: 16px 32px;
		}
	}

	.pressable-overview-plan-selection__details-card {
		flex: 1;
		border: 1px solid var( --color-neutral-5 );
		justify-content: space-between;
	}

	.pressable-overview-plan-selection__details-card-header-title {
		@include heading-large;

		&.plan-name {
			margin-block-end: 8px;
			@include heading-x-large;
		}
	}

	.pressable-overview-plan-selection__details-card-header-price {
		gap: 8px;
	}

	.pressable-overview-plan-selection__details-card-header-price-value {
		@include heading-x-large;
	}

	.pressable-overview-plan-selection__details > * {
		gap: 24px;
	}

	&.is-slider-hidden {
		.pressable-overview-plan-selection__details {
			margin-block-start: 24px;
		}
	}
}

.pressable-overview-plan-selection__manage-account-button-container {
	&,
	a.button {
		width: 100%;
	}
}

.pressable-overview-plan-selection__tooltip {
	max-width: 400px;
}

.pressable-overview-plan-selection__plan-category-tabpanel {
	.components-tab-panel__tabs {
		justify-content: center;
		flex-wrap: wrap;
		border: 1px solid var( --color-neutral-5 );
		border-radius: 4px;
		padding: 7px 0;
		margin: 0 auto 32px;
		max-width: 600px;

		button {
			flex: 1;
			margin: 0 7px;

			&:hover {
				background-color: initial;
				color: inherit;
			}

			&:disabled,
			&[aria-disabled='true'] {
				color: var( --color-neutral-20 );
			}

			&.pressable-overview-plan-selection__plan-category-tab-is-active {
				background-color: var( --color-primary-50 );
				border-color: var( --color-primary-50 );
				fill: var( --color-text-inverted );
				color: var( --color-text-inverted );
			}
		}
	}
}
