/* ==========================================================================
   MMX / PCINET QUICK ORDER
   ========================================================================== */
.mmx-pcinet-quick-order {
	--mmx-pcinet-quick-order-input-height: 50px;
	--mmx-pcinet-quick-order-dialog-close-size: 32px;
}

:focus-visible,
:focus:is(.mmx-pcinet-quick-order__search-result) {
	outline: 2px solid var(--mmx-color-focus);
}

.mmx-pcinet-quick-order slot[name="title"]::slotted(*) {
	margin: 0 auto 3%;
}

/* Form
  =========================================== */
.mmx-pcinet-quick-order__form {
	display: grid;
	gap: var(--mmx-spacing-m);
	position: relative;
}

.mmx-pcinet-quick-order__add-row {
	justify-self: center;

	mmx-icon {
		margin-right: 0.25em;
	}
}

.mmx-pcinet-quick-order__add-to-cart {
	justify-self: end;
}

/* Actions
  =========================================== */
.mmx-pcinet-quick-order__actions {
	text-align: center;
	display: flex;
	gap: var(--mmx-spacing-m);
	justify-content: center;
}

/* Dialog
  =========================================== */
.mmx-pcinet-quick-order__dialog {
	border-radius: var(--mmx-spacing-s);
	border: 0;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
	outline: 0;
	padding: var(--mmx-spacing-m);
}

@media screen and (min-width: 40em) {
	.mmx-pcinet-quick-order__dialog {
		max-width: 80vw;
		min-width: 50vw;
	}
}

.mmx-pcinet-quick-order__dialog::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

/* Dialogs
  =========================================== */
.mmx-pcinet-quick-order__bulk-container,
.mmx-pcinet-quick-order__csv-container {
	display: grid;
}

.mmx-pcinet-quick-order__load-bulk,
.mmx-pcinet-quick-order__load-csv {
	justify-self: right;
	margin-top: var(--mmx-spacing-m);
}

.mmx-pcinet-quick-order__dialog-close {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	position: absolute;
	right: var(--mmx-spacing-m);
	top: var(--mmx-spacing-m);
	border-radius: 100%;
	width: var(--mmx-pcinet-quick-order-dialog-close-size);
	height: var(--mmx-pcinet-quick-order-dialog-close-size);
}

.mmx-pcinet-quick-order__dialog-close-icon {
	font-size: var(--mmx-pcinet-quick-order-dialog-close-size);
}

.mmx-pcinet-quick-order__dialog-close:hover,
.mmx-pcinet-quick-order__dialog-close:focus {
	color: var(--mmx-color-grey-05);
}

.mmx-pcinet-quick-order__bulk-textarea {
	margin-top: var(--mmx-spacing-m);
	min-height: 10em;
	resize: vertical;
}

.mmx-pcinet-quick-order__csv-file {
	margin-top: var(--mmx-spacing-m);
	margin-bottom: var(--mmx-spacing-s);
}

/* Rows
  =========================================== */
.mmx-pcinet-quick-order__row-container {
	display: grid;
	gap: var(--mmx-spacing-m);
}

.mmx-pcinet-quick-order__row {
	align-items: center;
	border-radius: var(--mmx-spacing-xs);
	border: 1px solid var(--mmx-color-grey-02);
	display: grid;
	gap: 0 var(--mmx-spacing-xs);
	grid-template-areas:
		"input quantity remove"
		"results results results"
		"product product product"
		"status status status";
	grid-template-columns: 1fr 60px max-content;
	padding: var(--mmx-spacing-xs);
}

@media screen and (min-width: 40em) {
	.mmx-pcinet-quick-order__row {
		grid-template-areas:
			"input quantity remove"
			"results empty empty"
			"product product product"
			"status status status";
		grid-template-columns: 1fr 100px max-content;
	}
}

.mmx-pcinet-quick-order__search-input {
	grid-area: input;
}

.mmx-pcinet-quick-order__quantity {
	grid-area: quantity;
}

@media screen and (max-width: 39.999em) {
	.mmx-pcinet-quick-order__quantity {
		text-align: center;
		padding-left: var(--mmx-spacing-xs);
		padding-right: var(--mmx-spacing-xs);
	}

	.mmx-pcinet-quick-order__quantity::-webkit-outer-spin-button,
	.mmx-pcinet-quick-order__quantity::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}

.mmx-pcinet-quick-order__remove {
	grid-area: remove;
}

.mmx-pcinet-quick-order__remove-icon {
	font-size: 16px;
}

.mmx-pcinet-quick-order__remove::part(button) {
	height: var(--mmx-pcinet-quick-order-input-height);
	width: var(--mmx-pcinet-quick-order-input-height);
	padding: 0;
}

/* Elements
  =========================================== */
[hidden] {
	display: none;
}

input,
textarea {
	appearance: none;
	background-color: var(--mmx-color-white);
	border-radius: var(--mmx-spacing-xs);
	border: 1px solid var(--mmx-color-grey-02);
	display: inline-block;
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1;
	padding: calc(1.35em - 1px) calc(1.7em - 1px);
	width: 100%;
	height: var(--mmx-pcinet-quick-order-input-height);
}

a[target="_blank"]::after {
	content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==");
	margin-left: 0.25em;
}

/* Search Results
  =========================================== */
.mmx-pcinet-quick-order__search-results-container {
	background: white;
	border-radius: var(--mmx-spacing-xs);
	border: 1px solid var(--mmx-color-grey-02);
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
	display: grid;
	gap: var(--mmx-spacing-m);
	grid-area: results;
	max-height: 50vh;
	margin-bottom: var(--mmx-spacing-xs);
	overflow-y: auto;
	padding: var(--mmx-spacing-s);
}

.mmx-pcinet-quick-order__search-results-container:empty {
	display: none;
}

.mmx-pcinet-quick-order__search-result {
	background: #ffffff;
	border: none;
	border-radius: var(--mmx-spacing-xs);
	padding: var(--mmx-spacing-s);
	text-align: left;
}

.mmx-pcinet-quick-order__search-result.has-image {
	grid-template-columns: min(35%, var(--mmx-pcinet-quick-order__image-width)) 1fr;
	display: grid;
	gap: 0 var(--mmx-spacing-s);
}

.mmx-pcinet-quick-order__search-result-image {
	width: 100%;
	height: auto;
	justify-self: center;
	aspect-ratio: var(--mmx-pcinet-quick-order__image-aspect-ratio);
	object-fit: var(--mmx-pcinet-quick-order__image-fit);
	object-position: top;
}

.mmx-pcinet-quick-order__search-results-container .mmx-pcinet-quick-order__search-result {
	cursor: pointer;
}

.mmx-pcinet-quick-order__search-results-container .mmx-pcinet-quick-order__search-result:is(:hover, :active) {
	background: var(--mmx-color-grey-01);
}

[class*="mmx-pcinet-quick-order__search-result-inv-level"],
mmx-pcinet-featured-product::part(inventory-message) {
	color: var(--mmx-color-success-text);
}

.mmx-pcinet-quick-order__search-result-inv-level--low,
mmx-pcinet-featured-product.has-inv-level--low::part(inventory-message) {
	color: var(--mmx-color-warning-text);
}

.mmx-pcinet-quick-order__search-result-inv-level--out,
mmx-pcinet-featured-product.has-inv-level--out::part(inventory-message) {
	color: var(--mmx-color-error-text);
}

/* Selected Product
  =========================================== */
.mmx-pcinet-quick-order__selected-product {
	grid-area: product;
}

mmx-pcinet-featured-product {
	padding: var(--mmx-spacing-s);
}

mmx-pcinet-featured-product::part(wrapper) {
	gap: var(--mmx-spacing-s);
	flex-direction: row;
}

mmx-pcinet-featured-product::part(product-content) {
	flex-basis: 100%;
}

mmx-pcinet-featured-product::part(image-slider),
mmx-pcinet-featured-product::part(product-content) {
	margin: 0;
}

mmx-pcinet-featured-product::part(image-slider) {
	flex-basis: calc(var(--mmx-spacing-s) + var(--mmx-pcinet-quick-order__image-width));
}

mmx-pcinet-featured-product::part(product-name) {
	--mmx-text__inner--max-width: auto;

	margin-bottom: var(--mmx-spacing-xs);
}

mmx-pcinet-featured-product::part(pricing-discounts) {
	margin-bottom: var(--mmx-spacing-xs);
}

mmx-pcinet-featured-product::part(inventory-message) {
	background: none;
	border: 0;
	font-size: var(--mmx-product-price-size);
	margin-bottom: var(--mmx-spacing-xs);
	max-width: none;
	padding: 0;
}

mmx-pcinet-featured-product::part(current-price),
mmx-pcinet-featured-product::part(original-price) {
	font-size: var(--mmx-product-price-size);
}

mmx-pcinet-featured-product::part(discounts) {
	margin-top: var(--mmx-spacing-xs);
}

mmx-pcinet-featured-product::part(product-attributes) {
	margin-top: var(--mmx-spacing-m);
	margin-bottom: 0;
}

mmx-pcinet-featured-product::part(product-attribute) {
	margin-bottom: var(--mmx-spacing-xs);
}

mmx-pcinet-featured-product::part(product-add-to-cart) {
	display: none;
}

/* Status Message
  =========================================== */
.mmx-pcinet-quick-order__status-message:empty {
	display: none;
}

.mmx-pcinet-quick-order__status-message {
	grid-area: status;
}

.mmx-pcinet-quick-order__row[data-status="success"] {
	border-color: var(--mmx-color-success-border);
}

.mmx-pcinet-quick-order__row[data-status="info"] {
	border-color: var(--mmx-color-grey-03);
}

.mmx-pcinet-quick-order__row[data-status="warning"] {
	border-color: var(--mmx-color-warning-border);
}

.mmx-pcinet-quick-order__row[data-status="error"] {
	border-color: var(--mmx-color-error-border);
}

.mmx-pcinet-quick-order__row[data-status="success"] .mmx-pcinet-quick-order__status-message {
	color: var(--mmx-color-success-text);
}

.mmx-pcinet-quick-order__row[data-status="info"] .mmx-pcinet-quick-order__status-message {
	color: var(--mmx-color-grey-05);
}

.mmx-pcinet-quick-order__row[data-status="warning"] .mmx-pcinet-quick-order__status-message {
	color: var(--mmx-color-warning-text);
}

.mmx-pcinet-quick-order__row[data-status="error"] .mmx-pcinet-quick-order__status-message {
	color: var(--mmx-color-error-text);
}