@use "../abstracts/variables" as variables;

.firevert-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;

	&__switch {
		position: relative;
		display: inline-block;
		width: 64px;
		height: 34px;
		cursor: pointer;

		& input[type="checkbox"] {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			-webkit-appearance: none;
			appearance: none;
			cursor: pointer;
			outline: none;
			z-index: 2;
			opacity: 0;
		}

		&:has(input[type="checkbox"]:checked) .firevert-switch__knob {
			background-color: variables.$primary;

			&:before {
				transform: translateX(30px);
				background-color: variables.$white;
			}
		}
	}

	&__knob {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(variables.$primary, 0.2);
		border-radius: 40px;
		transition: all 0.2s ease-in;

		&:before {
			position: absolute;
			background-color: variables.$primary;
			content: "";
			left: 5px;
			top: 5px;
			width: 24px;
			height: 24px;
			border-radius: variables.$border-radius-circle;
			transition: all 0.2s ease-in;
		}
	}

	&__label {
		font-size: 16px;
		line-height: 21px;
		font-weight: 600;
		color: variables.$black;

		&--on {
			display: none;
		}
	}

	&:has(input[type="checkbox"]:checked) {
		.firevert-switch__label--off {
			display: none;
		}

		.firevert-switch__label--on {
			display: inline;
		}
	}
}