@import '../../../scss/index.scss';

$size: 16px;

// Оформление checker
@mixin checker-style () {
	& + .checker:after {
		border: 1px solid $hover;
	}
	&[checked] + .checker:after {
		border: 1px solid $checked-hover;
	}
	&[checked] + .checker .checker__checked {
		background: $checked-hover;
	}
}

// Чекбокс
@mixin checkbox () {
	@include flex-row-auto();
	position: relative;
	align-items: center;

	&,
	& * {
		@include fix();
		cursor: pointer;
	}
	&[disabled],
	&[disabled] * {
		cursor: default;
	}

	.input {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		opacity: 0;
		pointer-events: none;
	}

	.content {
		@include flex-col-auto();
	}

	.checker {
		@include flex-col-auto();
		position: relative;
		width: $size;
		height: $size;
		background: $bg;
		overflow: hidden;
		&:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 2px;
			transition: border 0.2s ease;
		}
	}
	.checker__checked {
		@include flex-col-auto();
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 2px;
		transition:
			transform 0.2s ease,
			background 0.2s ease,
			opacity 0.2s ease;
	}
	.checker__icon {
		margin: auto;
		width: 14px;
		height: 10px;
		fill: $fill;
	}

	// base
	.input + .checker:after {
		border: 1px solid $base;
	}
	.input + .checker .checker__checked {
		transform: scale(0.5);
		opacity: 0;
		background: $checked;
	}

	// Состояние - checked
	.input[checked] + .checker:after {
		border: 1px solid $checked;
	}
	.input[checked] + .checker .checker__checked {
		transform: scale(1);
		opacity: 1;
	}

	// disabled
	.input[disabled] + .checker .checker__checked {
		background: $disabled;
	}
	.input[disabled][checked] + .checker:after {
		border: 1px solid $disabled;
	}

	// hover
	&:hover {
		.input:not([disabled]) {
			@include checker-style();
		}
	}

	// focus
	.input:not([disabled]):focus {
		@include checker-style();
	}
}