/**
 * Delivery time block (date and time selects).
 *
 * Two labelled selects in the world's outlined form grammar, sharing the
 * WooCommerce Blocks select markup. Depends on css/foodmaster-tokens.css.
 */

.wp-block-foodmaster-time-to-deliver-block,
.wp-block-woocommerce-foodmaster-time-to-deliver-block {
	margin: 0 0 calc(var(--fm-m) * 2);
	font-family: var(--fm-font-body);
	color: var(--fm-black);
}

.wp-block-foodmaster-time-to-deliver-block[data-body-background-color] {
	background: transparent;
}

.wp-block-foodmaster-time-to-deliver {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--fm-m) * 1.5);
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__container {
	position: relative;
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__container:last-child {
	margin: 0;
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__label {
	position: static;
	transform: none;
	margin: 0;
	padding: 0;
	font-family: var(--fm-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: var(--fm-n7);
	pointer-events: auto;
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: calc(var(--fm-m) * 6);
	margin: 0;
	padding: 0 calc(var(--fm-m) * 5) 0 calc(var(--fm-m) * 1.5);
	background: var(--fm-paper);
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	box-shadow: none;
	color: var(--fm-black);
	font-family: var(--fm-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: box-shadow var(--fm-fast) var(--fm-ease);
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__select:hover {
	border-color: var(--fm-black);
	background: var(--fm-paper);
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__select:focus,
.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__container:focus-within .wc-blocks-components-select__select {
	outline: none;
	box-shadow: var(--fm-focus);
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__select:disabled {
	background: var(--fm-n1);
	border-color: var(--fm-n3);
	color: var(--fm-n6);
	cursor: not-allowed;
}

.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__expand {
	position: absolute;
	inset-inline-end: calc(var(--fm-m) * 1.5);
	bottom: calc(var(--fm-m) * 3 - 12px);
	width: 24px;
	height: 24px;
	fill: var(--fm-black);
	pointer-events: none;
}

.wp-block-foodmaster-time-to-deliver .foodmaster-no-dates-message {
	margin: 0;
	padding: var(--fm-m) calc(var(--fm-m) * 1.5);
	border: 1.5px solid var(--fm-error);
	border-radius: var(--fm-radius);
	color: var(--fm-error);
	font-size: 14px;
	font-weight: 600;
}

.wp-block-foodmaster-time-to-deliver .wc-block-components-spinner {
	color: var(--fm-ink);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-foodmaster-time-to-deliver .wc-blocks-components-select__select {
		transition: none;
	}
}

/* Inside the WooCommerce order summary the rows sit on a 16px inner module */
.wc-block-checkout__sidebar .wp-block-woocommerce-foodmaster-time-to-deliver-block,
.wc-block-components-order-summary .wp-block-woocommerce-foodmaster-time-to-deliver-block {
	padding-inline: 16px;
}