@import "../style/base";
@import "checkbox-vars";

:host {
	--_checkbox-bg: #{$checkbox-bg};
	--_checkbox-color: #{$checkbox-color};

	background: var(--_checkbox-bg);
	color: var(--_checkbox-color);
	width: $checkbox-size;
	height: $checkbox-size;
	border: $checkbox-border-config currentColor;
	border-radius: $checkbox-border-radius;
	transition: $checkbox-transition;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
	user-select: none;
}

:host(:not([disabled])) {
	cursor: pointer;
}

:host([checked]), :host([indeterminate]) {
	--_checkbox-bg: #{$checkbox-bg-checked};
	--_checkbox-color: #{$checkbox-color-checked};
}

:host([checked]:not([indeterminate])) {
	#checkmark-path {
		stroke-dashoffset: 0;
	}
}

:host([indeterminate]) {
	#indeterminate-path {
		stroke-dashoffset: 0;
	}
}

:host(:hover), :host(:focus) {
	will-change: border, background;

	#checkmark-path {
		will-change: stroke-dashoffset;
	}
}

:host([disabled]) {
	--_checkbox-bg: #{$checkbox-bg-disabled};
	--_checkbox-color: #{$checkbox-color-disabled};
	pointer-events: none;
}

:host([disabled][checked]), :host([disabled][indeterminate]) {
	--_checkbox-bg: #{$checkbox-bg-disabled-checked};
	--_checkbox-color: #{$checkbox-color-disabled-checked};
}

#checkmark {
	width: $checkbox-checkmark-size;
	height: $checkbox-checkmark-size;
}

#checkmark-path, #indeterminate-path {
	stroke-width: $checkbox-checkmark-path-width;
	stroke: $checkbox-checkmark-stroke-color;
	stroke-dasharray: $checkbox-checkmark-path-dasharray;
	stroke-dashoffset: $checkbox-checkmark-path-dasharray;
	transition: $checkbox-checkmark-transition;
}

#checkmark-path {
	transition-delay: $checkbox-checkmark-path-delay;
}

#ripple {
	transform: $checkbox-ripple-transform;
}
