@import "ui-kit/variables";
@import "ui-kit/mixins";

.cherry-ui-container{
	margin: 10px 0 20px 0;
}
label.cherry-label{
	margin: 0 0 5px 0;
	display: block;
}
.hide{
	display: none !important;
}
.cherry-checkbox-item{
	width: 26px;
	height: 26px;
	display: inline-block;
	border-radius: $border_radius_extra_small;
	margin-right: 10px;
	margin-bottom: 6px;
	cursor: pointer;
	position: relative;
	background-color: $grey_color_3;
	user-select: none;
	transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
		.marker{
			position: absolute;
			width: 26px;
			height: 26px;
			top: 0px;
			left: 0px;
			color: #fff;
			font-size: 28px;
			transition:inherit;
			transform: scale(0);
				&:before{
					transition:inherit;
					position: relative;
					left: -2px;
				}
		}
}
.cherry-checkbox-input[checked]{
	&+.cherry-checkbox-item{
		background-color: $green_color;
		.marker{
			transform: scale(1);
		}
	}
}
.cherry-checkbox-label{
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	line-height: 26px;
	color: $dark_color_1;
	user-select: none;
}