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

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

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

	@include bem.object("checkbox") {
		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-b) - props.get(
						vars.$key-focus--border-offset
					)
			);

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

			&::before,
			&::after {
				position: absolute;
				display: block;
				content: "";
			}

			&::before {
				inset-block-start: props.get(vars.$border-width);
				inset-inline-start: props.get(vars.$border-width);
				z-index: 2;
				inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
				block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
				background-color: props.get(vars.$box-bg-color);
				transition: transform 0.2s ease;
			}

			&::after {
				inset-block-start: calc(0.5 * props.get(vars.$size) - 1px);
				inset-inline-start: calc(1.5 * props.get(vars.$border-width));
				z-index: 3;
				box-sizing: border-box;
				inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
				block-size: 0;
				border-color: props.get(vars.$box-bg-color);
				border-style: solid;
				border-radius: 2px;
				transform: scale(0);
				transition: transform 0.2s ease;
				border-block-width: 0 2px;
				border-inline-width: 0 2px;
			}
		}

		@include bem.elem("check-icon") {
			position: absolute;
			inset-block-start: calc(1 * props.get(vars.$border-width));
			inset-inline-start: calc(1 * props.get(vars.$border-width));
			z-index: 2;
			display: block;
			inline-size: calc(100% - 2 * props.get(vars.$border-width));
			block-size: calc(100% - 2 * props.get(vars.$border-width));
			margin: 0;
			color: props.get(vars.$box-bg-color);
			stroke-width: fn.px-to-rem(3px);
			transform: scale(0);
			transform-origin: 40% 90%;
			transition: transform 0.2s ease;
		}

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

		@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("box") {
					background-color: props.get(vars.$hover--box-border-color);
				}
			}

			&:checked {
				@include bem.sibling-elem("box") {
					&::before {
						transform: scale(0);
					}

					@include bem.elem("check-icon") {
						transform: scale(1);
					}
				}
			}

			&:indeterminate {
				@include bem.sibling-elem("box") {
					&::before {
						transform: scale(0);
					}

					&::after {
						transform: scale(1);
					}

					@include bem.elem("check-icon") {
						transform: scale(0);
					}
				}
			}

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

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

					&::before {
						background-color: props.get(vars.$disabled--box-bg-color);
					}
				}
			}

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

				@include bem.sibling-elem("box") {
					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("box") {
				margin-block-start: 0;
			}
		}

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

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

				&:indeterminate {
					@include bem.sibling-elem("box") {
						background-color: props.get(vars.$accent--box-border-color);
					}

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

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

						&::before {
							background-color: props.get(vars.$disabled--box-bg-color);
						}
					}

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

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