/**
 * Order type block (Delivery, Pickup, Dine-in).
 *
 * A segmented control drawn with one outline: the selected segment fills
 * with black, the others stay paper. Works in the checkout sidebar, on a
 * page, and inside the mini cart. Depends on css/foodmaster-tokens.css.
 */

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

.wp-block-foodmaster-order-type-block[data-body-background-color] {
	background: transparent;
}

.foodmaster_order_type {
	width: 100%;
}

.foodmaster_order_type.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.foodmaster-order-type-nav {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--fm-black);
	border-radius: var(--fm-radius);
	background: var(--fm-paper);
	overflow: hidden;
}

.foodmaster-order-type-nav::-webkit-scrollbar {
	display: none;
}

.foodmaster-order-type-tab {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--fm-m) * 6);
	margin: 0;
	padding: 0 calc(var(--fm-m) * 1.5);
	background: var(--fm-paper);
	border: 0;
	border-inline-start: 1.5px solid var(--fm-black);
	border-radius: 0;
	color: var(--fm-black);
	font-family: var(--fm-font-display);
	font-weight: 800;
	font-size: 17px;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--fm-fast) var(--fm-ease), color var(--fm-fast) var(--fm-ease);
}

.foodmaster-order-type-tab:first-child {
	border-inline-start: 0;
}

.foodmaster-order-type-tab:hover:not(:disabled) {
	background: var(--fm-n1);
	color: var(--fm-black);
}

.foodmaster-order-type-tab.active,
.foodmaster-order-type-tab[aria-pressed="true"] {
	background: var(--fm-selected-bg);
	color: var(--fm-on-selected);
}

.foodmaster-order-type-tab.active:hover:not(:disabled),
.foodmaster-order-type-tab[aria-pressed="true"]:hover:not(:disabled) {
	background: var(--fm-black);
	color: var(--fm-paper);
}

.foodmaster-order-type-tab:disabled {
	color: var(--fm-n6);
	cursor: not-allowed;
}

.foodmaster-order-type-tab:focus {
	outline: none;
}

.foodmaster-order-type-tab:focus-visible {
	outline: none;
	box-shadow: inset var(--fm-focus);
	z-index: 1;
}

.foodmaster-order-type-text {
	display: inline-block;
}

@media (max-width: 420px) {
	.foodmaster-order-type-tab {
		font-size: 15px;
		padding-inline: var(--fm-m);
	}
}

@media (prefers-reduced-motion: reduce) {
	.foodmaster-order-type-tab {
		transition: none;
	}
}

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