.switch-toggle {
	--width: 200px;
	--height: 40px;
	--offset: 2px;
	--radius: 4px;
	position: relative;
	width: var(--width);
	height: var(--height);
	padding: var(--offset);
	background: rgba(183, 184, 185, 0.5);
	border-radius: var(--radius);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	font-style: normal;

	input[type="checkbox"] {
		cursor: pointer;
		position: absolute;
		inset: 0;
		appearance: none;
		z-index: 2;

		&:checked {
			+ label.switch-toggle-label {
				&:before {
					translate: 100% 0;
				}
				span {
					&:nth-child(1) {
						color: gray;
					}
					&:nth-child(2) {
						color: #1a1a1a;
					}
				}
			}
		}

		& + label.switch-toggle-label {
			position: absolute;
			inset: var(--offset, 0);
			padding: 10px 0;
			display: block;
			user-select: none;
			pointer-events: none;
			display: grid;
			gap: 2px;
			grid-auto-flow: column;
			grid-auto-columns: 1fr;
			place-items: center;

			&:before {
				content: "";
				position: absolute;
				width: 50%;
				inset: 0;
				background: #fff;
				border-radius: calc(var(--radius) - var(--offset));
				box-shadow: 0px 10px 20px 0px rgba(16, 39, 68, 0.1);
				translate: 0 0;
				transition: translate 250ms cubic-bezier(0.93, 0.26, 0.07, 0.69);
			}

			span {
				position: relative;
				transition: 200ms linear;

				&:nth-child(1) {
					color: #1a1a1a;
				}

				&:nth-child(2) {
					color: gray;
				}
			}
		}
	}
}