@import './variables';

.s-checkbox {
	display: flex;
	align-items: center;
	position: relative;

	label {
		padding-left: 12px;
	}
}

.s-checkbox__background {
	width: 100%;
	height: 100%;
	align-items: center;
	display: inline-flex;
	border: 2px solid currentColor;
	border-radius: 2px;
	color: inherit;
	background-color: transparent;
	transition: background-color $primary-transition;
	pointer-events: none;
}

.s-checkbox__wrapper {
	overflow: unset !important;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	height: $checkbox-size;
	width: $checkbox-size;
	position: relative;
	user-select: none;
	// border-radius: 100%;

	&::before {
		// border-radius: inherit;
		border-radius: 100%;
		content: '';
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: currentColor;
		transform: scale(2);
		opacity: 0;
	}

	&:not(.disabled) {
		color: var(--theme-text-secondary);
		cursor: pointer;

		&:hover::before {
			opacity: 0.16;
		}
	}

	&.disabled {
		opacity: $checkbox-disabled-opacity;
		color: var(--theme-controls-disabled) !important;
	}

	input {
		position: absolute;
		width: $checkbox-size * 2;
		height: $checkbox-size * 2;
		cursor: inherit;
		opacity: 0;
		margin: 0;
		padding: 0;

		&:checked ~ .s-checkbox__background,
		&:indeterminate ~ .s-checkbox__background {
			background-color: currentColor;
			border: none;
		}
	}

	svg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		color: #ffffff;
		padding: 1px;

		path {
			stroke: currentColor;
		}
	}
}