// ============================================================
// Osmo — Toggle Switch
// data-* must not be renamed. Visual overrides for dark theme
// live below (Amateur / Elite in block-orbit-team).
// ============================================================

.toggle-switch {
	--toggle-count: 2;
	--toggle-padding: 0.35rem;
	--toggle-radius: 0.25rem;
	width: auto;
	padding: var(--toggle-padding);
	grid-template-rows: auto;
	grid-auto-columns: 1fr;
	grid-template-columns: repeat(var(--toggle-count, 2), 1fr);
	background-color: #202327;
	border-radius: var(--toggle-radius);
	display: inline-grid;
	position: relative;
	flex-shrink: 0;
}

.toggle-switch__bg {
	position: absolute;
	top: var(--toggle-padding);
	bottom: var(--toggle-padding);
	left: var(--toggle-padding);
	width: calc((100% - 2 * var(--toggle-padding)) / var(--toggle-count, 2));
	transform: translateX(calc(var(--toggle-active, 0) * 100%));
	background-color: #fff;
	border-radius: calc(var(--toggle-radius) - 0.0625rem);
	transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
	pointer-events: none;
}

.toggle-switch__btn {
	z-index: 1;
	color: #fff;
	background-color: transparent;
	border: none;
	justify-content: center;
	align-items: center;
	padding: 0.65rem 2rem;
	min-width: 7rem;
	transition: color 0.2s;
	display: flex;
	position: relative;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.toggle-switch__btn[data-toggle-active] {
	color: #0a0a0a;
}
