@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;

$shading: with-opacity(var(--ui-soft), 20);
$tinting: with-opacity(var(--action), 20);

.switch {
	cursor: pointer;
	display: inline-block;

	.switch-toggle {
		background: $shading;
		border-radius: var(--radius-large);
		display: inline-block;
		height: 0.625rem;
		position: relative;
		transform: translateY(-0.125rem);
		transition: var(--transition-fast);
		vertical-align: middle;
		width: 2.125rem;

		&::before {
			font-family: brandui-icons;
			content: attr(data-icon-default);
			transition: left var(--transition-fast);
			background: var(--ui-soft);
			border-radius: 50%;
			box-shadow: var(--shadow-near);
			outline: transparent solid 0.1875rem;
			display: block;
			height: 1.25rem;
			left: -0.1875rem;
			position: absolute;
			top: -0.313rem;
			width: 1.25rem;
		}
	}

	&.toggle {
		.switch-toggle {
			background: $tinting;

			&::before {
				background: var(--action);
			}
		}
	}

	input[type='checkbox'] {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
	}

	input[type='checkbox']:checked + .switch-toggle {
		background: $tinting;

		&::before {
			background: var(--action);
			left: 1.063rem;
		}
	}

	input[type='checkbox']:focus + .switch-toggle {
		&::before {
			outline: var(--action-outline) solid 0.1875rem;
		}
	}

	&.reverse {
		transform: rotate(180deg);
	}

	&.alt {
		.switch-toggle {
			background: var(--ui-soft);
			border-radius: 1.25rem;
			width: max-content;
			min-width: 4rem;
			height: 1.75rem;
			padding: 0.25rem;

			&::before {
				background: var(--ui-fill);
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				left: 0.25rem;
				top: 0.25rem;
			}

			.switch-labels {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-right: var(--padding-extra-small);
				padding-left: var(--padding-extra-small);
				color: var(--ui-fill);
				pointer-events: none;
				user-select: none;
				height: 1.25rem;
				width: max-content;
				overflow: hidden;
				box-sizing: border-box;

				@include font.get-typography(body-small-medium);

				> * {
					display: block;
					position: relative;
					transition:
						opacity var(--transition-fast),
						width var(--transition-fast);
					width: max-content;
					z-index: 0;

					&:first-child {
						opacity: 0;
						width: 1.25rem;
					}

					&:last-child {
						opacity: 1;
						width: max-content;
					}
				}
			}
		}

		&.toggle {
			.switch-toggle {
				background: var(--action);

				&::before {
					background: var(--ui-fill);
					color: var(--action);
				}
			}
		}

		&.adjust {
			.switch-toggle {
				height: 1.75rem;
			}
		}

		input[type='checkbox']:checked + .switch-toggle {
			background: var(--action);

			&::before {
				background: var(--ui-fill);
				color: var(--action);
				content: attr(data-icon-active);
				left: calc(100% - 1.5rem);
			}

			.switch-labels {
				> * {
					&:first-child {
						opacity: 1;
						width: max-content;
					}

					&:last-child {
						opacity: 0;
						width: 1.25rem;
					}
				}
			}
		}
	}
}

.toggle-switch {
	input[role='switch'] {
		opacity: 0;
		position: absolute;
		top: -9999999px;
		left: -9999999px;

		~ .switch-state {
			display: flex;
			user-select: none;
			position: relative;
			border-radius: 1.25rem;
			width: max-content;
			padding: 0.25rem;
			min-width: 4rem;
			height: 1.75rem;
			outline: transparent solid 0.1875rem;
			background: var(--neutral-3);

			.switch-label {
				display: block;
				place-self: center end;
				padding-inline: 1.75rem 0.5rem;

				@include font.get-typography(body-small-medium);

				color: var(--default);

				&.active {
					color: var(--ui-fill);
				}
			}

			&::before {
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				left: 0.25rem;
				top: 0.25rem;
				background: var(--ui-fill);
			}

			.switch-container {
				.switch-position {
					position: absolute;
					right: 100%;
					left: 0;
					top: 50%;
					transform: translate(5px, -50%);
					display: inline-block;
					border: 2px solid white;
					border-radius: 2rem;
					width: 1.25rem;
					height: 1.25rem;
					background: white;
					transition: 0.2s ease-in-out;
				}
			}
		}

		&:focus {
			~ .switch-state {
				outline: var(--action-outline) solid 0.1875rem;
			}
		}

		&:checked {
			~ .switch-state {
				background: var(--action);

				.switch-label {
					justify-self: start;
					padding-inline: 0.5rem 1.75rem;
				}

				.switch-container {
					.switch-position {
						right: 0;
						left: 100%;
						transform: translate(calc(-100% - 5px), -50%);
					}
				}
			}
		}
	}

	:hover {
		cursor: pointer;
	}
}