@use "../01-abstract/variables" as *;
@use "m-rtl" as *;
@use "m-sr-only" as *;

@use "sass:math";

/**
 * Checkbox custom
 *
 * @author Nicolas Langle
 *
 * @param $color
 * @param $size
 * @param $border-width
 *
 * Examples :
 *
 *      input[type="checkbox"] {
 *          @include checkbox-custom;
 *
 *          &:checked {
 *              @include checkbox-custom-checked;
 *          }
 *      }
 *
 */

@mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) {
	@include sr-only;

	+ label {
		position: relative;
		display: block;
		padding-inline-start: $size + 20;
		cursor: pointer;

		&::before {
			position: absolute;
			top: 1px;
			left: 0;
			width: $size;
			height: $size;
			margin: 0;
			content: "";
			background-color: $color-light;
			border: $border-width solid $color;

			@include rtl {
				right: 0;
				left: auto;
			}
		}

		&::after {
			position: absolute;
			top: 7px;
			left: math.round(math.div($size, 2));
			width: math.round(math.div($size, 1.5));
			height: math.round(math.div($size, 2.5));
			content: "";
			border-color: $color;
			border-style: solid;
			border-width: 0 0 2px 2px;
			opacity: 0;
			transition: opacity .2s;
			transform: translate(-50%, -50%) rotate(-45deg);

			@include rtl {
				right: math.round(math.div($size, 2));
				left: auto;
				transform: translate(50%, -50%) rotate(-45deg);
			}
		}
	}
}

@mixin checkbox-custom-checked {
	+ label {
		&::after {
			opacity: 1;
		}
	}
}
