.switch,
.switch-disabled {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	gap: 27px;
	padding: 4px 0px;
	width: 100%;
	user-select: none;
	border: none;
	background-color: inherit;
	font-family: inherit;
	color: var(--app-font-color);
	text-align: left;

	& .switch-background {
		width: 26px;
		min-width: 26px;
		height: 10px;
		border-radius: 13px;
		background-color: var(--gray-secondary);
		transition: background-color 0.3s ease;
	}

	& .switch-knob {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background-color: var(--gray-secondary);
		transition: transform 0.3s ease;
		transform: translateX(0) translateY(-3px);
	}

	& .switch-knob.checked {
		transform: translateX(10px) translateY(-3px);
		background-color: var(--app-primary-color);
	}
}

.switch:hover {
	background-color: var(--background-highlight-color);
}

.switch-disabled {
	opacity: 0.35;
}