@use "sass:meta";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../props" as *;
@use "../core.vars" as core;

@forward "switch.vars";
@use "switch.vars" as vars;

@mixin styles {
	@include materialize-at-root(meta.module-variables("vars"));

	@include bem.object("switch") {
		position: relative;
		display: inline-block;
		padding-block: props.get(vars.$pad-b);
		padding-inline: props.get(vars.$pad-i);
		margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
			calc(
				props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(
						vars.$key-focus--border-offset
					)
			);

		@include bem.elem("indicator") {
			display: inline-block;
			flex: 0 0 auto;
			inline-size: props.get(vars.$inline-size);
			block-size: props.get(vars.$block-size);
			margin-block-start: calc(
				0.5em * props.get(core.$font--standard--line-height) - 0.5 *
					props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)
			);
			vertical-align: top;
			background-color: props.get(vars.$track-bg-color);
			background-clip: padding-box;
			border: props.get(vars.$key-focus--border-offset) solid transparent;
			border-radius: 2em;
			transition: background-color 0.2s ease;

			&::after {
				display: block;
				inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
				block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
				content: "";
				background-color: props.get(vars.$handle-bg-color);
				border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
				border-radius: props.get(vars.$inline-size);
				transition: transform 0.2s ease;
			}
		}

		@include bem.elem("label") {
			margin-inline-start: props.get(vars.$label-gap);
		}

		@include bem.elem("native") {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			z-index: -1;
			inline-size: 100%;
			block-size: 100%;
			padding: 0;
			margin: 0;
			overflow: hidden;
			appearance: none;
			border-radius: props.get(vars.$rounding);

			&:hover,
			&:focus-visible {
				@include bem.sibling-elem("label") {
					color: props.get(vars.$hover--label-color);
				}

				@include bem.sibling-elem("indicator") {
					&::after {
						border-color: props.get(vars.$hover--handle-border-color);
					}
				}
			}

			&:checked {
				@include bem.sibling-elem("indicator") {
					background-color: props.get(vars.$handle-border-color);

					&::after {
						border-color: props.get(vars.$handle-border-color);
						transform: translate(
							calc(
								props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px
							),
							0
						);
					}
				}

				&:hover,
				&:focus-visible {
					@include bem.sibling-elem("indicator") {
						background-color: props.get(vars.$hover--handle-border-color);

						&::after {
							border-color: props.get(vars.$hover--handle-border-color);
						}
					}
				}
			}

			&:disabled {
				@include bem.sibling-elem("label") {
					color: props.get(vars.$disabled--label-color);
				}

				@include bem.sibling-elem("indicator") {
					background-color: props.get(vars.$disabled--track-bg-color);

					&::after {
						background-color: props.get(vars.$disabled--handle-bg-color);
						border-color: props.get(vars.$disabled--handle-border-color);
					}
				}

				&:checked {
					@include bem.sibling-elem("indicator") {
						background-color: props.get(vars.$disabled--handle-border-color);

						&::after {
							border-color: props.get(vars.$disabled--handle-border-color);
						}
					}
				}
			}

			&:focus-visible {
				@include bem.sibling-elem("label") {
					color: props.get(vars.$key-focus--label-color);
				}

				@include bem.sibling-elem("indicator") {
					outline: props.get(vars.$key-focus--border-color) solid
						props.get(vars.$key-focus--border-width);
					box-shadow: 0 0 0
						calc(
							props.get(vars.$key-focus--border-width) +
								props.get(vars.$key-focus--outline-width)
						)
						props.get(vars.$key-focus--outline-color);
				}
			}
		}

		@include bem.modifier("standalone") {
			@include bem.elem("indicator") {
				margin-block-start: 0;
			}
		}

		@include bem.modifier("accent") {
			@include bem.elem("native") {
				&:checked {
					@include bem.sibling-elem("indicator") {
						background-color: props.get(vars.$accent--handle-border-color);

						&::after {
							border-color: props.get(vars.$accent--handle-border-color);
						}
					}

					&:hover,
					&:focus-visible {
						@include bem.sibling-elem("indicator") {
							background-color: props.get(vars.$accent--hover--handle-border-color);

							&::after {
								border-color: props.get(vars.$accent--hover--handle-border-color);
							}
						}
					}
				}

				&:disabled {
					@include bem.sibling-elem("label") {
						color: props.get(vars.$disabled--label-color);
					}

					&:checked {
						@include bem.sibling-elem("indicator") {
							background-color: props.get(vars.$disabled--handle-border-color);

							&::after {
								border-color: props.get(vars.$disabled--handle-border-color);
							}
						}
					}
				}
			}
		}
	}
}