@use "../common/mixins" as *;
@use "../common/variables" as *;

.urlslab-switch {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	transition: all $transitionTime;

	&-text {
		order: -1;
		margin-right: 0.5em;
		font-size: 0.8125rem;
		font-weight: $font-weight-semi;

		.textAfter & {
			order: 0;
			margin-left: 0.5em;
			margin-right: 0;
		}

		.option & {
			margin-right: auto;
		}
	}

	&-input {
		display: none !important;
	}

	&-switcher {
		position: relative;
		display: block;
		width: 2.5rem;
		height: 1.5rem;
		flex: 0 0 auto;
		color: transparent;
		user-select: none;
		cursor: pointer;

		&-button,
		&::before {
			position: absolute;
			display: block;
			color: $grey-medium;
			cursor: pointer;
		}

		&::before {
			content: "";

			@include square(100%);
			background-color: currentcolor;
			border-radius: 9999em;
			transition: background-color 0.25s ease;
		}

		&-button {

			@include square(1.25rem);
			top: 50%;
			left: 0;
			transform: translate(2px, -50%);
			border-radius: 50%;
			background-color: $white;
			box-shadow: $box-shadow-small;
			transition: transform $transitionTime ease;

			svg {

				@include square(0.75em, !important);
				@include absoluteCenter;
				position: absolute;
				fill: currentcolor;
				transition: all $transitionTime ease;

				&.on {
					opacity: 0;
				}
			}
		}
	}

	@media (hover: hover) {

		&:hover {
			color: $primary-color;
		}
	}

	.urlslab-multi-switch {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	&-input:checked + &-switcher {

		[class*="button"],
		&::before {
			color: $primary-color;

			.secondary & {
				color: $saturated-green;
			}
		}

	}


	&-input:checked + &-switcher &-switcher-button {
		transform: translate(calc(100% - 2px), -50%);

		svg {

			&.on {
				opacity: 1;
			}

			&.off {
				opacity: 0;
			}
		}
	}
}