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

.domain-suggestion {
	display: flex;
	flex-direction: column;

	&.card {
		padding: 16px 12px;

		@include break-mobile {
			padding: 16px 24px;
		}
	}

	@include break-mobile {
		flex-direction: row;
		align-items: center;
	}

	.domain-suggestion__content-domain {
		justify-content: space-between;
	}

	&.is-clickable {
		cursor: pointer;

		/* NOTE: easeOutExpo easing function from http://easings.net/#easeOutExpo */
		transition: box-shadow 0.25s cubic-bezier(0.19, 1, 0.22, 1);

		&:hover {
			z-index: z-index("root", ".domain-suggestion.is-clickable:hover");
		}
	}

	.domain-registration-suggestion__domain-title {
		font-size: $font-body;

		@include break-small {
			white-space: nowrap;
		}

		.domain-registration-suggestion__domain-title-name {
			color: var(--studio-gray-60);
		}

		.domain-registration-suggestion__domain-title-tld {
			font-weight: 500;
			color: var(--studio-gray-90);
		}
	}

	.badge {
		border-radius: 4px;
		font-size: 0.75rem;
		font-weight: 500;
		margin: 2px 4px 0 0;

		&.badge--warning {
			background-color: var(--color-warning-10);
		}
	}
}

.domain-suggestion:not(.featured-domain-suggestion) {
	display: flex;
	flex-direction: column;

	@include break-mobile {
		flex-direction: row;
		align-items: center;
	}

	.is-section-signup & {
		@include breakpoint-deprecated( ">480px" ) {
			flex-direction: column;
			align-items: center;
		}
	}

	.is-section-stepper & {
		@include breakpoint-deprecated(">480px") {
			flex-direction: column;
			align-items: center;
		}
	}

	.is-section-domains & {
		@include breakpoint-deprecated( ">800px" ) {
			flex-direction: row;
			align-items: center;
		}
	}

	&.is-added {
		background-color: var(--color-neutral-0);

		.domain-suggestion__content {
			h3,
			.domain-product-price {
				color: var(--color-neutral);
			}
		}
	}

	&.is-unavailable {
		cursor: default;

		.domain-suggestion__content {
			h3,
			.domain-product-price {
				color: var(--color-neutral);
			}
		}
	}
}

.domain-suggestion__content {
	width: 100%;
	min-height: 32px;
	gap: 16px;
	display: flex;
	flex-direction: column;

	@include breakpoint-deprecated( ">660px" ) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.calypso-notice.is-compact {
		margin: 0 0 0 8px;
		color: var(--color-text-inverted);

		&.is-success {
			background: var(--color-success);
		}

		&.is-info {
			background: var(--color-primary);
		}

		&.is-warning {
			background: var(--color-warning);
		}

		.calypso-notice__content {
			padding: 4px 8px;
		}
	}

	.calypso-notice__icon-wrapper {
		display: none;
	}

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		background-color: var(--color-neutral-0);
		color: transparent;
		min-height: 44px;
	}

	@include breakpoint-deprecated( ">660px" ) {
		.is-placeholder & {
			min-height: 22px;
		}

	}

	> h3 {
		word-break: break-all;

		@include breakpoint-deprecated( ">660px" ) {
			flex-grow: 2;
		}
	}

	> div {
		.is-placeholder & {
			color: transparent;
		}
	}
}

.domain-registration-suggestion__title-info {
	display: flex;
	align-items: center;

	@include breakpoint-deprecated( ">800px" ) {
		max-width: 55%;
	}
}

.domain-registration-suggestion__title-wrapper {
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	align-items: flex-start;

	&.domain-registration-suggestion__title-domain {
		@include breakpoint-deprecated( ">480px" ) {
			min-width: 50%;
			margin-right: 1em;
		}

		@include breakpoint-deprecated( ">800px" ) {
			min-width: 55%;
			margin-right: 1em;
		}
	}

	.domain-registration-suggestion__title {
		width: auto;
		max-width: 100%;
		padding-right: 0.2em;
	}

	.domain-registration-suggestion__hsts-tooltip {
		display: inline;
		vertical-align: middle;
		align-items: center;
		justify-content: center;
		margin-left: 4px;
	}

	body.is-section-signup .layout:not(.dops) & {
		.domain-registration-suggestion__hsts-tooltip {
			padding: 0;
		}
	}
}

.domain-registration-suggestion__title {
	font-size: $font-body;
	word-break: break-all;

	@include breakpoint-deprecated( ">480px" ) {
		padding-right: 2em;
	}
}

.domain-suggestion__price-container,
.domain-suggestion__action-container {
	flex: 0 0 auto;
	width: 100%;

	@include break-mobile {
		width: auto;
	}
}

.domain-suggestion__price-container {
	padding-right: 1em;
	margin-top: 10px;
	@include break-mobile {
		margin-top: 0;
	}
}

.button.domain-suggestion__action {
	width: 100%;
	min-width: 130px;
	min-height: 40px;
	text-align: center;
	padding: 0.25em 3em;
	margin-left: 0;

	@media (min-width: 660px) {
		width: auto;
		flex: 1 0 auto;
	}

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		background-color: var(--color-neutral-0);
		border: none;
		border-radius: 0;
		color: transparent;
		margin-left: 40px;
		min-height: 26px;
	}

	&.is-borderless {
		color: var(--color-primary);
		padding: 0;
		display: flex;
		align-items: center;

		/* Checkmark for selected domains */
		svg {
			height: 20px;
			top: 0;
			left: -2px;
			margin-right: 4px;
		}
	}

}

.domain-suggestion__chevron {
	display: none;
	margin-left: 10px;
	flex: 1 0 auto;
	color: var(--color-neutral-light);

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		color: var(--color-neutral-0);
	}

	.is-section-signup & {
		@include breakpoint-deprecated( ">480px" ) {
			display: block;
		}
	}

	.is-section-domains & {
		@include breakpoint-deprecated( ">800px" ) {
			display: block;
		}
	}
}

.domain-registration-suggestion__badges {
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	&:not(.featured-domain-suggestion) {
		width: 100%;
	}


	@include break-mobile {
		margin: 0 0 0 4px;
	}
}

.domain-registration-suggestion__info-badge {
	.info-popover {
		height: 16px;
		vertical-align: middle;
		margin: 0 0 2px 4px;
	}
}

.domain-product-price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 100%;
}

body.is-section-stepper,
body.is-section-signup {
	&:not(:has(.step-container-v2)) {
		svg:not(.jetpack-logo, .social-buttons__button svg) {
			padding-top: 0;
			margin-right: 0;
		}
	}

	.domain-registration-suggestion__badges {
		margin-left: 0;
		margin-bottom: 4px;

		.badge {
			border-radius: 4px;
			font-size: 0.75rem;
			font-weight: 500;
			white-space: nowrap;
		}

		@include break-wide {
			flex: 1;
		}
	}

	.featured-domain-suggestion--is-placeholder .domain-registration-suggestion__badges {
		margin-left: 0;
	}

	.domain-suggestion {
		flex-direction: column;
		box-shadow: none;
		margin: 0;

		@include break-small {
			margin: 0 20px;
		}

		@include break-large {
			margin: 0;
		}

		button.info-popover {
			padding: 0;
		}

		& .domain-suggestion__content-domain {
			justify-content: space-between;
			gap: 1rem;
		}

		.domain-product-price__free-text {
			font-size: $font-body-small;
			color: var(--studio-green-60);
		}

		.domain-product-price__free-price {
			font-weight: initial;

			@include break-mobile {
				font-weight: 500;
			}
		}

		.domain-product-price__price {
			font-size: $font-body-small;
			font-weight: initial;
		}

		&.is-clickable:hover {
			@include break-mobile {
				border-top: 1px solid #646970;
				border-bottom: 1px solid #646970;
			}
		}

		.domain-registration-suggestion__title {
			font-size: 0.875rem;
			margin-right: 12px;

			@include break-mobile {
				font-size: 1rem;
				align-self: baseline;
			}
		}
		&.is-placeholder.card .domain-suggestion__action {
			display: none;
		}

		& .domain-registration-suggestion__domain-title {
			color: var(--studio-gray-90);
		}

		&:not(.featured-domain-suggestion) {
			background: none;
			border-bottom: 1px solid rgba(220, 220, 222, 0.64);
			border-top: 1px solid #fff; /*This white border is to prevent jumpiness while showing borders on hover*/

			.domain-registration-suggestion__domain-title {
				.domain-registration-suggestion__domain-title-name {
					color: var(--studio-gray-60);
				}

				.domain-registration-suggestion__domain-title-tld {
					font-weight: 500;
				}
			}

			.domain-product-price {
				width: unset;

				@include break-small {
					flex-grow: 1;
				}
			}

			.domain-product-price__free-text {
				font-size: $font-body;

				@include break-mobile {
					font-size: $font-body-small;
				}
			}

			.domain-product-price__price:not(.domain-product-price__free-price) {
				font-size: $font-body-small;
			}

			.domain-suggestion__action.is-borderless {
				color: var(--color-text);
				padding: 0 1.5em;
				line-height: 24px;
				@include break-mobile {
					width: auto;
				}

				.gridicons-checkmark {
					color: var(--studio-green-60);
				}

				&:disabled {
					color: var(--color-neutral-20);

					.gridicons-checkmark {
						color: var(--color-neutral-20);
					}
				}

				&.is-busy {
					pointer-events: none;
					animation: button__busy-animation 3000ms infinite linear;
					background-size: 120px 100%;
					background-image: linear-gradient(-45deg, var(--color-neutral-10) 28%, var(--studio-gray-5) 28%, var(--studio-gray-5) 72%, var(--color-neutral-10) 72%);
				}
			}
			.domain-suggestion__action:not(.is-borderless) {
				width: 100%;
				height: auto;
				line-height: 20px;
				padding: 0.57em 1.17em;
				border-radius: 4px;
				letter-spacing: 0.32px;
				font-size: 0.875rem;

				@include break-mobile {
					padding: 0.65em 2.8em;
					width: 100%;
				}
			}

			&.domain-transfer-suggestion {
				$cod-grey: #2b2d2f;

				.domain-suggestion__action {
					color: $cod-grey;
					text-decoration-line: underline;
				}
				.domain-suggestion__chevron {
					fill: $cod-grey;
					margin-left: 0;
				}
			}

			&.domain-skip-suggestion {
				$cod-grey: #2b2d2f;

				.domain-suggestion__action {
					height: auto;
					color: $cod-grey;
					text-decoration-line: underline;
				}
				.domain-suggestion__chevron {
					fill: $cod-grey;
					margin-right: 20px;
					margin-left: 0;
				}
			}
		}

		&.featured-domain-suggestion .domain-suggestion__action-container .domain-suggestion__action.is-borderless {
			padding: 0.57em 1.3em !important;
			box-shadow: none !important;
			color: var(--color-text);
			font-weight: normal !important;

			.gridicons-checkmark {
				color: var(--studio-green-60);
			}

			&:disabled {
				color: var(--color-neutral-20);

				.gridicons-checkmark {
					color: var(--color-neutral-20);
				}
			}

			&.is-busy {
				pointer-events: none;
				animation: button__busy-animation 3000ms infinite linear;
				background-size: 120px 100%;
				background-image: linear-gradient(-45deg, var(--color-neutral-10) 28%, var(--studio-gray-5) 28%, var(--studio-gray-5) 72%, var(--color-neutral-10) 72%);
			}
		}
	}
}

.domain-suggestion__price-placeholder {
	animation: loading-fade 1.6s ease-in-out infinite;
	background-color: var(--color-neutral-0);
	color: transparent;
	height: 16px;
	margin: auto 0;
	width: 20%;
}
