/*
	Segmented toggle and segmented switch, the MVC port of the SvelteKit components in
	svelte-web/src/lib/components/segmented-toggle (see /components/segmented-toggle).

	Segmented toggle: a pill of mutually exclusive options; the selected one sits raised on white.
		<div class="segmented-toggle" role="radiogroup">
			<button type="button" role="radio" class="segment active" aria-checked="true">Denna match</button>
			<button type="button" role="radio" class="segment" aria-checked="false">Flera matcher</button>
		</div>

	Segmented switch: one label whose mini switch lights up when on. Put "switch-left" on the
	button when the switch comes before the label.
		<div class="segmented-switch">
			<button type="button" role="switch" class="segment active" aria-checked="true">Flera matcher<span class="mini-switch"></span></button>
		</div>

	Sizes: sm is the default (the Svelte look), add "segmented-md" or "segmented-lg" to the wrapper.
*/

.segmented-toggle,
.segmented-switch {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border-radius: 7px;
	background: #0000000d;
	vertical-align: middle;
	/* The segments inherit it (font: inherit) */
	font-family: Inter, sans-serif;
}

	/* Explicit resets, so the buttons do not get the browser's border and background */
	.segmented-toggle .segment,
	.segmented-switch .segment {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		border: 1px solid transparent;
		border-radius: 5px;
		background: transparent;
		padding: 3px 10px;
		font: inherit;
		font-size: 11px;
		font-weight: 500;
		line-height: 16px;
		letter-spacing: inherit;
		color: #888;
		white-space: nowrap;
		cursor: pointer;
		transition: color 100ms ease, background-color 100ms ease;
	}

	/* The same inset on both sides, whichever side the switch is on */
	.segmented-switch .segment {
		padding: 3px 8px 3px 8px;
	}

		.segmented-switch .segment.switch-left {
			padding: 3px 8px 3px 8px;
		}

		.segmented-toggle .segment:not(.active):hover,
		.segmented-switch .segment:not(.active):hover {
			color: #555;
		}

		.segmented-toggle .segment.active,
		.segmented-switch .segment.active {
			border-color: #e2e2df;
			background: #fff;
			color: #333;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
		}

		.segmented-toggle .segment.active {
			cursor: default;
		}

		.segmented-toggle .segment:disabled,
		.segmented-switch .segment:disabled {
			opacity: .6;
			cursor: default;
		}

	/* 20×12 track with an 8px knob, the toggle switch's look at chip size */
	.segmented-switch .mini-switch {
		position: relative;
		flex-shrink: 0;
		width: 20px;
		height: 12px;
		border-radius: 9999px;
		/* background: #ccc; */
		background: #00000030;
		transition: background-color 150ms ease;
	}

		.segmented-switch .mini-switch:before {
			content: '';
			position: absolute;
			top: 2px;
			left: 2px;
			width: 8px;
			height: 8px;
			border-radius: 9999px;
			background: #fff;
			transition: transform 150ms ease;
		}

	.segmented-switch .segment.active .mini-switch {
		background: #41bd7f;
	}

		.segmented-switch .segment.active .mini-switch:before {
			transform: translateX(8px);
		}

/* md */
.segmented-toggle.segmented-md .segment,
.segmented-switch.segmented-md .segment {
	gap: 5px;
	padding: 4px 12px;
	font-size: 13px;
}

.segmented-switch.segmented-md .segment {
	padding: 4px 10px 4px 10px;
}

	.segmented-switch.segmented-md .segment.switch-left {
		padding: 4px 10px 4px 10px;
	}

.segmented-switch.segmented-md .mini-switch {
	width: 24px;
	height: 14px;
}

	.segmented-switch.segmented-md .mini-switch:before {
		width: 10px;
		height: 10px;
	}

	.segmented-switch.segmented-md .segment.active .mini-switch:before {
		transform: translateX(10px);
	}

/* lg */
.segmented-toggle.segmented-lg,
.segmented-switch.segmented-lg {
	gap: 3px;
	padding: 3px;
	border-radius: 9px;
}

	.segmented-toggle.segmented-lg .segment,
	.segmented-switch.segmented-lg .segment {
		gap: 6px;
		border-radius: 6px;
		padding: 6px 16px;
		font-size: 15px;
		line-height: 20px;
	}

	.segmented-switch.segmented-lg .segment {
		padding: 6px 11px 6px 11px;
	}

		.segmented-switch.segmented-lg .segment.switch-left {
			padding: 6px 11px 6px 11px;
		}

	.segmented-switch.segmented-lg .mini-switch {
		width: 28px;
		height: 16px;
	}

		.segmented-switch.segmented-lg .mini-switch:before {
			width: 12px;
			height: 12px;
		}

		.segmented-switch.segmented-lg .segment.active .mini-switch:before {
			transform: translateX(12px);
		}