@use "newspack-colors" as np-colors;
@use "../shared/sass/variables";

// Checkout modal specific styles.
.newspack-ui {
	iframe[name="newspack_modal_checkout_iframe"] {
		border: none;
		height: calc(100% + var(--newspack-ui-spacer-9, 48px));
		margin: calc(-1 * var(--newspack-ui-spacer-5, 24px));
		max-width: unset;
		width: calc(100% + var(--newspack-ui-spacer-9, 48px));
	}
}

// Default modal styles when newspack ui is not present.
.newspack-blocks {
	&__modal-container {
		position: fixed;
		z-index: -1;
		inset: 0;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		visibility: hidden;
		pointer-events: none;

		&__overlay {
			position: absolute;
			z-index: 1;
			inset: 0;
			opacity: 0;
			background: rgba(np-colors.$neutral-1000, 0.5);
			transition: opacity 0.1s linear;
		}

		&[data-state="open"] {
			z-index: 99999;
			visibility: visible;
			pointer-events: auto;
			.newspack-blocks__modal-container__overlay {
				opacity: 1;
			}
			.newspack-blocks__modal {
				opacity: 1;
				transform: translateY(0);
			}
		}

		& .newspack-blocks {
			&__modal {
				position: relative;
				z-index: 2;
				width: 100%;
				transform: translateY(50px);
				opacity: 0;
				transition: transform 0.1s linear, opacity 0.1s linear;
				border-radius: 6px;
				background: np-colors.$neutral-000;
				max-width: 600px;
				max-height: 90%;
				min-height: 300px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				overflow: auto;

				&__header {
					padding: 24px;
					box-sizing: border-box;
					height: 64px;
					border-bottom: 1px solid np-colors.$neutral-300;
					display: flex;
					align-items: center;
					justify-content: space-between;
					h2 {
						font-size: 16px;
					}
				}

				&__content {
					position: relative;
					flex-grow: 1;
					> * {
						width: 100%;
						height: 100%;
						border: 0;
						border-radius: 6px;
					}
				}

				&__close {
					padding: 8px;
					border: 0;
					background: transparent;
					color: np-colors.$neutral-900;
					cursor: pointer;
					&:focus,
					&:hover {
						color: np-colors.$neutral-600;
					}
					svg {
						display: block;
					}
				}
			}

			&__spinner {
				align-items: center;
				background: np-colors.$neutral-000;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				position: absolute;
				top: 0;
				bottom: 0;
				width: calc(100% - 24px);
				> span {
					animation: spin 1s infinite linear;
					border: 2px solid np-colors.$neutral-000;
					border-top-color: np-colors.$neutral-600;
					border-radius: 50%;
					height: 25px;
					width: 25px;
					margin-top: -12.5px;
					margin-left: -12.5px;
				}
			}
		}
	}

	// Product variations styles
	&__modal-variation {
		.newspack-blocks {
			&__selection {
				> *:first-child {
					margin-top: 0;
				}

				h3 {
					margin: 0;

					+ p {
						margin-top: calc(var(--newspack-ui-spacer-base, 8px) / 2);
					}
				}
			}

			&__options {
				list-style: none;
				display: flex;
				flex-wrap: wrap;
				gap: var(--newspack-ui-spacer-2, 12px);
				margin: var(--newspack-ui-spacer-5, 24px) 0 0;
				padding: 0;

				&__item {
					border: 1px solid var(--newspack-ui-color-border, np-colors.$neutral-300);
					border-radius: var(--newspack-ui-border-radius-m, 6px);
					display: flex;
					flex-direction: column;
					flex: 1 1 100%;
					text-align: center;

					@media (min-width: variables.$mobile_width) {
						flex: 1 1 30%;
						max-width: calc(33.3333% - 10px);
						&:first-child:nth-last-child(2),
						&:first-child:nth-last-child(2) ~ li {
							flex: 1 1 40%;
							max-width: calc(50% - 10px);
						}
					}

					.summary {
						font-size: var(--newspack-ui-font-size-xs, 14px);
						line-height: var(--newspack-ui-line-height-xs, 1.4286);
						padding: var(--newspack-ui-spacer-5, 24px) var(--newspack-ui-spacer-2, 12px);
						height: 100%;
						position: relative;

						.price {
							del,
							.suggested-prefix {
								color: var(--newspack-ui-color-neutral-60, np-colors.$neutral-600);
								left: 0;
								position: absolute;
								top: calc(var(--newspack-ui-spacer-base, 8px) * 0.75);
								width: 100%;
							}

							// Scale up just the primary price for a product, not the other fees:
							> .amount > bdi,
							> ins > .amount > bdi,
							> .suggested-text > .amount > bdi {
								color: initial;
								display: block;
								font-weight: 600;
								font-size: var(--newspack-ui-font-size-xl, clamp(1.375rem, 0.394rem + 2.008vw, 2rem));
								line-height: var(--newspack-ui-line-height-xl, 1.375);
							}
						}
					}

					.variation {
						border-top: 1px solid var(--newspack-ui-color-border, np-colors.$neutral-300);
						font-size: var(--newspack-ui-font-size-xs, 14px);
						font-weight: 600;
						line-height: var(--newspack-ui-line-height-xs, 1.4286);
						margin-top: auto;
						padding: var(--newspack-ui-spacer-2, 12px);
					}

					form {
						border-top: 1px solid var(--newspack-ui-color-border, np-colors.$neutral-300);
						padding: var(--newspack-ui-spacer-2, 12px) var(--newspack-ui-spacer-2, 12px) 0;
						button {
							display: block;
							margin-top: 0 !important;
							width: 100%;
						}
					}
				}
			}
		}
	}
}

.non-modal-checkout-loading {
	position: relative;

	span {
		visibility: hidden;
	}

	&::before {
		animation: spin 900ms infinite linear;
		border: 1.5px solid;
		border-color: currentcolor currentcolor transparent transparent;
		border-radius: 50%;
		content: "";
		display: block;
		height: 18px;
		inset: calc(50% - 9px) calc(50% - 9px) auto auto;
		position: absolute;
		width: 18px;
	}
}


@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.modal-processing {
	opacity: 0.5;
}
