// SCSS imports
@import "../config";
@import "../library/mixins";

@import "icons";
@import "photo-gallery";
@import "messaging";
@import "form-elements";
@import "image-text";
@import "grid-boxes";
@import "add-module";
@import "ck-editor";
@import "medium-editor";

@import "../frontend/layout";
@import "../frontend/typography";
@import "../frontend/editor_media";
@import "../frontend/button";
@import "../frontend/grid-boxes";



// GENERAL LAYOUT
.xprez {
	box-sizing: border-box;
	@include sans($font-b);
	font-size: $basefont-b;
	font-weight: 400;
	min-width: $min-width;
	padding: 0 40px 0 0;
	margin-top: $g;
	margin-bottom: $g*3;
}

.xprez-module {
	border: 1px solid $b-gray-4;
	margin: $g 0;
	&.collapsed .xprez-module__collapse-cont {
		display: none;
	}
}

.xprez-module__title {
	background: $b-gray-2;
	text-align: center;
	overflow: hidden;
	position: relative;
	padding-bottom: 3px;

	h2 {
		@include type-b(12px);
		color: darken($b-gray-7,15%);
		cursor: move;
		position: absolute;
		top: 0;
		right: 120px;
		left: 120px;
		margin: 0;
		font-weight: normal;

		i {
			font-style: normal;
			opacity: 0.9;
			margin-left: .5rem;
		}
	}

	.xprez-icon-btn-collapse {
		float: left;
		margin-top: 2px;
		margin-left: 2px;
	}

	.xprez-icon-btn-remove,
	.xprez-icon-btn-copy,
	.xprez-icon-btn-eye,
	.xprez-icon-btn-dots-horizontal-triple {
		float: right;
		margin-top: 2px;
		margin-right: 2px;
	}
}

.xprez-module__options {
	background: $b-gray-2;
	text-align: center;
	padding: 2px;
	line-height: 28px;

	&.hidden {
		display: none;
	}

	li {
		margin: .5rem 0;
	}
}

.xprez-module__common-options {
	background: rgba(0,0,0,0.02);
}

.xprez-module__content {
	background: white;
	border-top: 1px solid $b-gray-4;
	//min-height: 200px;
	padding: 15px;
	overflow: hidden;
}

//

.xprez-module .xprez-module__options-group {
	list-style: none;
	display: inline-block;
	padding: 0 10px;
	border-left: 1px solid $b-gray-5;
	margin: 0;

	&:first-child {
		border-left: none;
	}

	li {
		display: inline-block;
		vertical-align: middle;
		font-size: 12px;
	}
}

//

.xprez-add {
	text-align: center;

	h2 {
		@include type-b(13px,2,2,2);
		color: $b-gray-7;
		font-weight: normal;
	}
}

.xprez-add__list {
	padding-left: 0;
	list-style: none;

	li {
		display: inline-block;
		cursor: pointer;
		width: 60px;
		padding: 0 5px;
		vertical-align: top;

		&:hover {
			.xprez-add__label { color: $b-blue-high; }

			[class^="xprez-icon-btn-add"], [class*=" xprez-icon-btn-add"] {
				background: $b-blue-high;
			}
		}
	}
}

.xprez-add__label {
	@include type-b(12px,0.9,.5,1);
	display: inline-block;
	color: $b-gray-7;
}


//
// Icon Buttons
//

[class^="xprez-icon-btn-"], [class*=" xprez-icon-btn-"] {
	width: 28px;
	text-align: center;
	cursor: pointer;
	color: $b-gray-7;
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;

	&:before {
		font-size: 20px;
		line-height: 28px;
	}

	&:hover {
		background: $b-gray-4;
	}

	&.active {
		color: white;
		background: $b-gray-7;
	}
}
.xprez-icon-btn-remove:before {content: "\e872";}

.xprez-icon-btn-collapse:before {
	content: "\e5c6";
	font-size: 28px;

	.collapsed & { content: "\e5c5";}
}

.xprez-icon-btn-remove.active{
	background: $b-red;
}

.xprez-icon-btn-layout_1:before {content: "\e8f3";}
.xprez-icon-btn-layout_2:before	{content: "\e8f2";}
.xprez-icon-btn-layout_3:before	{content: "\e8f0";}
.xprez-icon-btn-layout_4:before	{content: "\e42a";}
.xprez-icon-btn-layout_6:before	{content: "\e900";}
.xprez-icon-btn-layout_8:before	{content: "\e901";}
.xprez-icon-btn-crop:before	{content: "\e3be";}
.xprez-icon-btn-copy:before { content: "\e14d"; }
.xprez-icon-btn-align-center:before {content: "\e903";}
.xprez-icon-btn-background:before {content: "\e905";}
.xprez-icon-btn-border:before {content: "\e957";}
.xprez-icon-btn-chevron-small-down:before { content: "\e906";}
.xprez-icon-btn-chevron-small-up:before {content: "\e907";}
.xprez-icon-btn-edit-pencil:before { content: "\e908"; }
.xprez-icon-btn-dots-horizontal-triple:before { content: "\e90b"; }

.xprez-icon-btn-eye	{
	position: relative;

	&:before {
		content: "\e902";
		color: $b-blue-high;
	}

	&:after {
		content: '';
		position: absolute;
		left: 10%;
		top: 50%;
		width: 80%;
		height: 2px;
		background: $b-blue-high;
		transform: rotate(-45deg);
		transform-origin: 40% 0%;
		border-radius: 5px;
	}
}

.xprez-icon-btn-eye.active	{
	background: none;

	&:before {
		color: $b-gray-7;
	}

	&:after {
		display: none;
	}
}

// Text Buttons

.xprez-option-btn {
	@include type-b(12px, 28px);
	border-radius: 2px;
	display: inline-block;
	color: $b-gray-7;
	padding: 0 7px;
	letter-spacing: 0.02em;
	cursor: pointer;
	&:hover {
		background: $b-gray-4;
	}
	&.active {
		color: white;
		background: $b-gray-7;
	}
	[class^="xprez-icon"] {
		margin-right: 5px;
		font-size: 20px;
		vertical-align: middle;
	}
}

// Add icon buttons

[class^="xprez-icon-btn-add"], [class*=" xprez-icon-btn-add"] {
	transition: all 300ms;
	width: 60px;
	cursor: pointer;
	color: white;
	display: inline-block;
	background: $b-gray-7;
	border-radius: 30px;
	&:before {
		font-size: 25px;
		line-height: 60px;
	}
	&:hover {
		background: $b-purple;
	}
	&.active {
		color: white;
		background: $b-gray-8;
	}
}
.xprez-icon-btn-add-default:before {content: "\e86e";}  // TODO:kaplick create better default icon
.xprez-icon-btn-add-text_content:before {content: "\e235";}
.xprez-icon-btn-add-text_box:before {content: "\e8b0";}
.xprez-icon-btn-add-code_template:before {content: "\e8be";}
.xprez-icon-btn-add-numbers:before {content: "\e3d4";}
.xprez-icon-btn-add-video:before {content: "\e8da";}
.xprez-icon-btn-add-gallery:before {content: "\e432";}
.xprez-icon-btn-add-feature_boxes:before {content: "\e875";}
.xprez-icon-btn-add-code:before {content: "\e86f";}
.xprez-icon-btn-add-quote:before {content: "\e0b7";}
.xprez-icon-btn-add-linked_article:before {content: "\e86e";}
.xprez-icon-btn-add-downloads:before {content: "\e2c0";}
.xprez-icon-btn-add-text_image:before {content: "\e060";}
.xprez-icon-btn-add-grid_boxes:before {content: "\e904";}
.xprez-icon-btn-add-anchor:before {content: "\e909";}

// Option forms
.xprez-option-label {
	@include type-b(12px, 28px);
	display: inline-block;
	color: $b-gray-7;
	letter-spacing: 0.02em;
}
.xprez .xprez-option-input {
	@include sans($font-b);
	border-radius: 2px;
	box-shadow: none;
	box-sizing: border-box;
	@include type-b(12px, 20px);
	height: auto;
	width: 150px;
	vertical-align: middle;
	padding: 3px 5px;
	border: 1px solid $b-gray-4;
}







