@import "~@wordpress/base-styles/breakpoints";
@import "../scss/cart";
@import "../scss/buttons";

.wp-block-edd-checkout {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr; // Mobile-first: single column

	// Default grid behavior for all child elements
	> * {
		grid-column: 1 / -1;
	}

	#edd_purchase_form {
		@import "../scss/forms";

		select {
			padding: 4px 6px;
		}

		.edd-card-vat-wrap {
			grid-column: span 2;
		}
	}

	.edd-blocks-form__cart,
	.edd-blocks-form__purchase {
		padding: 0;
		border: none;
	}

	#edd_discount_code {
		background: none;
		margin: 0;
	}

	.edd-blocks__cart #edd-discount-code-wrap,
	.edd-blocks__cart #edd_show_discount {
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
		margin: 0;
	}

	#edd-payment-mode-wrap {
		display: flex;
		gap: 0.5rem;
		clear: both;
		flex-wrap: wrap;

		label.edd-gateway-option {
			display: flex !important;
			margin: 0 !important;
			padding: 0.5rem 1rem;
			border: 1px solid;
			flex-grow: 1;
			text-align: center;
			border-radius: 3px;
			position: relative;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;
			font-size: 1rem;

			&.edd-gateway-option-selected,
			&:hover {
				background-color: var(--edd-blocks-light-grey);
			}

			&:hover {
				cursor: pointer;
				transform: translateY(-1px);
			}
		}

		input {
			position: absolute;
			height: 1em;
			width: 1em;
			opacity: 0;
			margin: 0;
		}

		.edd-payment-icons {
			display: flex;
			margin: 0;
			gap: 0.25rem;
			align-items: center;

			.payment-icon {
				max-height: 1rem;
				width: auto;
				margin: 0;

				&.icon-paypal {
					max-height: 1.5rem;
				}
			}
		}
	}

	.edd-discount-code-field-wrap {
		display: flex;
		gap: 0.5rem;
		align-items: center;

		input {
			display: block !important;
			margin: 0 !important;
		}
	}

	.edd-loading-ajax.edd-loading {
		margin: 0 auto;
		display: block;
		opacity: 1;
	}

	.edd-blocks-form__group--card-expiration select {
		display: inline-block !important;
		width: 50px !important;
	}
}

#edd_checkout_form_wrap.wp-block-edd-checkout > p {
	margin-bottom: 0;
}

.edd-blocks-form__cart {
	.edd-blocks-cart__discount {
		text-align: left;
	}

	#edd_checkout_cart .edd_discount {
		display: inline-flex;
		margin-left: 0.5rem;
		align-items: center;
		gap: 0.25rem;
	}
}

.edd-blocks__checkout-user {
	margin-bottom: 2rem;
	position: relative;

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

.edd-blocks__checkout-forms {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
	justify-content: center;

	button {
		padding: 0.5rem 1rem;

		&:disabled {
			display: none;
		}
	}

	&--inline {
		@media (min-width: $break-small) {
			margin-bottom: 0;
			position: absolute;
			right: 2rem;
			z-index: 99;
		}
	}
}

.edd-blocks-cart__row-buttons {
	justify-content: flex-end;
}

.edd-blocks-form.cc-address {
	grid-template-columns: 1fr 1fr;

	legend,
	> div {
		grid-column: span 2;
	}

	&.cc-address--state-zip {
		.edd-card-state,
		.edd-card-zip {
			grid-column: span 1;
		}
	}

	&.cc-address--country-zip {
		legend,
		> div {
			grid-column: span 1;
		}
	}

	.iti {
		display: block;
	}
}

// Layout variations
@media (min-width: $break-medium) {
	.wp-block-edd-checkout {
		&:not(.edd-checkout__layout--full) {
			.edd-blocks__logged-in {
				order: -20;
				grid-column: 1 / -1 !important;
			}

			.edd-blocks__cart {
				order: -10;
			}

			.edd-blocks__purchase-form {
				order: 10;
			}

			> .edd-alert {
				order: 20;
			}
		}

		&.edd-checkout__layout--half,
		&.edd-checkout__layout--two-thirds,
		&.edd-checkout__layout--four-fifths {
			grid-template-columns: 1fr 1fr;

			.edd-blocks__cart {
				grid-column: 2;
			}

			.edd-blocks__purchase-form {
				grid-row: 1;
				order: -5;
			}

			&.edd-blocks__checkout--logged-in {
				.edd-blocks__purchase-form {
					grid-row: 2;
				}
			}

			> *:not(.edd-blocks__cart) {
				grid-column: 1;
			}
		}

		&.edd-checkout__layout--two-thirds {
			grid-template-columns: 2fr 1fr;
		}

		&.edd-checkout__layout--four-fifths {
			grid-template-columns: 4fr 1fr;
		}

		&.edd-checkout__layout--half-bottom,
		&.edd-checkout__layout--two-thirds-bottom {
			grid-template-columns: 1fr 1fr;

			.edd-blocks__cart {
				grid-column: 1 / -1;
			}

			#edd_purchase_form {
				grid-column: 1 / -1;
				order: 99;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20px;
				align-items: start;
			}
		}

		&.edd-checkout__layout--two-thirds-bottom {
			grid-template-columns: 2fr 1fr;

			#edd_purchase_form {
				display: grid;
				grid-template-columns: 2fr 1fr;
			}
		}
	}
}