@import "/ui/styles/_theme.scss";

.check {
	pointer-events: all;
	flex-direction: row;
	align-items: center;
	align-self: flex-start;
	gap: 12px;
	padding: 12px 18px 12px 14px;
	background-color: rgba(255,255,255,0.02);
	border: 1px solid $line;
	border-left: 2px solid $line-strong;
	cursor: pointer;
	flex-grow: 0;
	flex-shrink: 1;
	max-width: 100%;

	&:hover { background-color: rgba(255,255,255,0.04); border-left-color: $accent; }
	&.is-on { border-left-color: $accent; }

	checkbox {
		pointer-events: none;
		width: 22px;
		height: 22px;
		flex-shrink: 0;
		margin-top: 0;
	}

	&.is-on checkbox {
		background-color: $accent;
		border-color: $accent;

		> .checkmark { background-color: $accent; }
	}

	.check-text { flex-direction: column; flex-grow: 0; flex-shrink: 1; max-width: 360px; }
	.check-title { font-size: $fs-3; font-weight: 700; color: $text; letter-spacing: 0.3px; }
	.check-sub   { font-size: $fs-3; font-weight: 500; color: $text-dim; margin-top: 4px; }
}