$color-1: #fff; // Background color.
$widget-bg: #495159; // Background color in widgets.
$color-2: #efefef; // Background color.
$color-3: #96989a; // Description color and tabs button text color.
$color-4: #b4b7ba; //
$color-5: #f1f1f1; // Scrollbar background
$color-6: #e5e5e5; // Hover scrollbar background
$color-7: #206ff4; // Scrollbar track background
$link-color: #298ffc; // link color.
$link-hover-color: #23282d; // link hover color.

$shadow: 0px 5px 21px rgba(0, 0, 0, 0.1); //Shadow.
$border: 1px solid rgba(0, 0, 0, 0.1) ;

$br-radius: 5px; // Border radius.

$padding: 5px;
$margin: 10px;
$max-height: 700px;

@import "components/use-in-js";
@import "components/variables";
@import "components/mixins";

@import "controls/button";
@import "controls/checkbox";
@import "controls/colorpicker";
@import "controls/iconpicker";
@import "controls/media";
@import "controls/radio";
@import "controls/repeater";
@import "controls/select";
@import "controls/slider";
@import "controls/stepper";
@import "controls/switcher";
@import "controls/text";
@import "controls/textarea";
@import "controls/dimensions";

.cherry-ui-container{
	margin: 10px 0 20px 0
}

label.cherry-label{
	margin: 0 0 5px 0;
	display: block;
}

.hide{
	display: none !important;
}

.cx-ui-kit{
	font-size: 13px;
	h1{
		font-weight: 700;
		line-height: 1.2em;
		margin: 0;
		.dashicons{
			font-size: 3em;
			line-height: inherit;
			width: 20px;
			margin: 0 $margin * 2 0 $margin * -0.5;
		}
	}
	h2{
		font-weight: 600;
		font-size: 1.538em;
		line-height: 1.538em;
		.dashicons{
			font-size: 2em;
			line-height: inherit;
			width: 20px;
			margin-right: $margin * 2;
		}
	}
	h3{
		font-weight: 600;
		font-size: 1.231em;
		line-height: 1.231em;
		.dashicons{
			font-size: 1.7em;
			line-height: inherit;
			margin-right: $margin * 0.5;
		}
	}
	h4{
		font-weight: 500;
		font-size: 1.077em;
		line-height: 1.077em;

	}
	h5{
		font-weight: 500;
		font-size: 1.077em;
		line-height: 1.077em;
	}
	h6{
		font-weight: 400;
		font-size: 1em;
		line-height: 1em;
	}
	a{
		color: $link-color;
		text-decoration: none;
		&:hover{
			color: $link-hover-color;
		}
		&:focus{
			outline: 1px solid rgba(41, 143, 252, .6);
			box-shadow: 0px 0px 2px rgba(41,143,252,0.6);
		}
	}
	&__description{
		font-size: 0.9em;
		color: $color-3;
		margin: $margin 0;
	}
	&__title{
		margin: $margin*2 0;
	}
	&.hide{
		display: none;
	}
}

.cx-control + .cx-control, .cx-settings + .cx-control{
	border-top: $border;
}

.cx-section{
	padding: $padding;
	background-color: $color-1;
	margin-left: -10px;
	&__title, &__description{
		margin: $margin 0 0 0;
	}
	& + .cx-ui-kit {
		border-top: $border;
	}
	@media ( min-width: 783px ) {
		box-shadow:$shadow;
		border-radius: $br-radius;
		border: $border;
		padding: $padding * 1.5;
		margin: $margin * 1.5 $margin * 1.5 0 0;
		&__holder{
			background-color: $color-2;
			border-radius: $br-radius;
			padding: $padding * 1.5;
		}
		&__inner{

		}
		&__info{
			background-color: $color-1;
			border-radius: $br-radius;
			padding: $padding * 1.5;
			box-shadow: $shadow;
			margin-bottom: $padding * 1.5;
		}
		.cx-settings{
			box-shadow: $shadow;
			border-radius: $br-radius;
			border: $border;
			background-color: $color-1;
			margin-top: $padding * 1.5;
			&:first-child{
				margin-top: 0;
			}
		}
	}
	@media ( min-width: 961px ) {
		padding: $padding * 3;
		margin: $margin * 2 $margin * 2 0 0;
		&__info{
			padding: $padding * 3;
			margin-bottom: $padding * 3;
		}
		&__holder{
			padding: $padding * 3;
		}
		.cx-settings{
			margin-top: $padding * 3;
		}
	}
}

.cx-component{
	padding: $padding * 2 0;
	@media ( min-width: 783px ) {
		padding: $padding * 1.5;
	}
	@media ( min-width: 961px ) {
		padding: $padding * 3;
	}
	& + * {
		border-top: $border;
	}
	&__title{
		margin-top: 0;
	}
	& &__content{
		.cx-settings{
			padding: 0;
			border-top: none;
		}
	}
	&__button{
		display: block;
		min-height: 45px;
		.cx-ui-kit__title {
			color: inherit;
		}
		&.active, &:hover{
			color: $link-color;
			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		&:focus{
			outline: none;
			box-shadow: inset 0px 0px 10px rgba(41,143,252,0.5);
			transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}
		transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
	&.cx-accordion, &.cx-toggle{
		.cx-component__button{
			width: 100%;
			padding: $padding * 1.5 $padding * 2;
			border:0;
			background: none;
			cursor: pointer;
			position: relative;
			.widget &{
				background-color: $widget-bg;
				color: $color-1;
			}
			.cx-toggle__title {
				font-weight: 700;
				font-size: 14px;
				float: left;
				margin: 0;
			}
			>span[class*="icon"]{
				position: absolute;
				top: 50%;
				right: 5px;
				margin-top: -10px;

				font-size: 25px;
				color: $color-4;
				padding: 5px 5px;
				width: 10px;
				height: 9px;
				text-align: left;
				overflow: hidden;
				.widget &{
					color: $color-1;
				}
				&.hide-icon{
					&:before{
						position: relative;
						top: -8px;
						left: -9px;
					}
					transform:scaleX(1);
					transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
				}
				&.show-icon{
					&:before{
						position: relative;
						top: -7px;
						left: -9px;
					}
					transform:scaleX(0);
					transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
				}
			}
			&.active{
				>span[class*="icon"]{
					&.show-icon{
						transform:scaleX(1);
						transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
					}
					&.hide-icon{
						transform:scaleX(0);
						transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
					}
				}
			}
		}
		.cx-component__button + .cx-settings__content{
			border-top: $border;
		}
		> .cx-ui-kit__content{
			& > .cx-settings + .cx-settings{
				margin-top: $margin;
			}
			> .cx-settings{
				box-shadow:$shadow;
				border-radius: $br-radius;
				border: $border;
				.widget &{
					box-shadow:none;
					border-radius: 0;
					border-left: 0;
					border-right: 0;
				}
			}
		}
	}
	&.cx-tab{
		.cx-tab__tabs{
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			border-bottom: $border;
			.cx-component__button{
				order: 0;
				flex: 0 1 100%;
				align-self: auto;
				padding: $padding * 1.5 $padding * 2;
				border: 0;
				background: none;
				cursor: pointer;
				&.active{
					-ms-box-shadow: inset 0px -3px 0px 0px $link-color;
					box-shadow: inset 0px -3px 0px 0px $link-color;
				}
				.cx-tab__title {
					font-weight: 700;
					font-size: 14px;
					float: left;
					margin: 0;
				}
				& + button{
					border-top: $border;
				}
			}
		}
		.cx-tab__body{
			box-shadow:$shadow;
			border-radius: $br-radius;