@import '../styles/variables';

.Checkbox {
	display: inline-block;
	height: 16px;

	label {
		display: inline-block;

		input[type='checkbox'] {
			display: none;
		}
	}

	&__bullet {
		display: inline-block;
		width: 16px;
		height: 16px;
		position: relative;
		margin-right: 6px;
		background: linear-gradient(320deg, var(--primary-color) 0%, var(--secondary-color) 100%);
		border-radius: 4px;
		user-select: none;

		.checkmark-icon {
			@include absolute-center;
		}
	}

	&__label {
		display: inline-block;
		color: var(--text-color);
		position: relative;
		top: -3px;
		line-height: 16px;
		font-weight: normal;
		user-select: none;
		transition: color 0.2s linear;
	}

	&:hover {
		.Checkbox__bullet {
			&::before {
				display: block;
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(255, 255, 255, 0.06);
			}
		}
	}

	&--disabled,
	&--disabled:hover {
		opacity: 0.8;

		.Checkbox__bullet {
			background: #808080;
		}

		.Checkbox__label {
			color: #90959d;
		}
	}
}
