/*
	HTML structure:
		<label class="rc-checkbox">
			<input type="checkbox" name="dont-ask" class="rc-checkbox__input">
			{{> icon icon="check" block="rc-checkbox__icon"}}
			<span class="rc-checkbox__text rc-text__small">Don't ask me again!</span>
		</label>
 */

.rc-checkbox {
	position: relative;

	margin: 6px 8px;

	cursor: pointer;

	&__input {
		position: absolute;

		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		width: 0;
		height: 0;

		opacity: 0;

		&[disabled] ~ .rc-checkbox__text::before {
			border-color: var(--color-gray-light);
		}

		&:checked {
			& ~ .rc-checkbox__icon {
				display: block;
			}

			& ~ .rc-checkbox__text::before {
				border-color: var(--rc-color-button-primary-light);
				background-color: var(--rc-color-button-primary);
			}
		}
	}

	&__text {
		display: flex;

		margin: 0 -8px;
		align-items: center;

		&::before {
			width: 12px;
			height: 12px;
			margin: 0 8px;

			content: "";

			transition: all 0.3s;

			border: 1px solid var(--rc-color-primary-light-medium);
			border-radius: 2px;
			background: transparent;
		}

		&:hover {
			&::before {
				border-color: var(--rc-color-primary-light);
			}
		}
	}

	&__icon {
		position: absolute;
		top: 3px;

		left: 2px;

		display: none;

		width: 8px;

		color: white;
	}
}
