@import "variables";
.p-categories-edit {
	.pce-top-status {
		margin: 0 0 12px 0; padding: 0; list-style: none;
		li {
			display: inline-block;
			vertical-align: middle;
			& + li { margin-left: 10px; }
		}
	}

	.pce-sidemenu {
		ul {
			border: 1px solid $color_gray_10;
			margin: 0; padding: 0; list-style: none;
			li {
				position: relative;
				& + li { border-top: 1px solid $color_gray_10; }
				a { border: none; color: $color_dark; }

				.pce-sidemenu-item {
					//position: relative;
					.overlink {}
					.pce-sidemenu-navs {
						background: none; border: none;
						position: relative;
						//z-index: 55;
						float: right;
						margin: 0;
						padding: 3px 6px 0 0;
						list-style: none;
						li {
							background: none;
							border: none;
							display: inline-block;
							vertical-align: middle;
							margin: 0; padding: 0;
							input {
								&.disabled {
									visibility: hidden;
								}
							}
						}

						span.ellipsis {
							display: inline-block;
							vertical-align: top;
						}

						.dropdown {
							.dropdown-menu {
								//background: $color_water;
								background: lighten($color_yellow, 30%);
								width: 220px;
								li {
									display: block !important;
									a {
										display: block;
										padding: 4px 12px;
										white-space: normal !important;
										//.icobox { margin-left: -16px; }
										&.pl-24 { padding-left: 24px; }
										&:hover, &:focus { background: darken($color_water, 15%); }

										&.disabled {
											color: $color_gray_30;
											&:hover {
												background: none;
												cursor: not-allowed;
											}
										}
									}
								}
							}
							&.open {
								.fa { visibility: visible; }
							}
						}
						.fa, .hide, input {
							display: block !important;
							font-size: 16px;
							visibility: hidden;
							margin-left: 2px;
							@include transition(none);
							svg { display: block; width: 16px; height: 16px; }
							&:hover { color: $color_blue; }
							&.fa-unlink {
								visibility: visible;
								&:hover { color: $color_red; }
							}
							&:checked { visibility: visible; }
						}
					}
					.pce-sidemenu-link {
						position: relative;
						overflow: hidden;
						padding: 6px 12px 6px 24px;
						&:before {
							content: '';
							position: absolute; top: 12px; left: 12px;
							border: 4px solid transparent;
						}

						.pce-sidemenu-link__name {
							.highlight {
								background: $color_body;
								padding: 0;
							}
						}
						.pce-sidemenu-bind {
							position: relative; z-index: 555;
							display: none;
							padding-top: 2px;
							.btn {
								padding: 1px 12px 4px !important;
							}
						}
					}
					&:hover, &.hover {
						//background: #D5E6F6;
						background: lighten($color_yellow, 30%);
						.pce-sidemenu-navs {
							.fa, .hide, input { visibility: visible; }
						}
					}
					&.sub {
						.pce-sidemenu-link {
							&:before { border-left-color: $color_dark; }
						}
					}
					&.active {
						background: #2DB92D;
						.pce-sidemenu-link {
							//.pce-sidemenu-bind { display: block; }
						}
					}
				}

				.pce-sidemenu-drop {
					display: none;
					& > ul, & > ul > li { border: none; }
					.pce-sidemenu-link {
						padding-left: 36px;
						&:before {
							left: 24px;
						}
					}
					.pce-sidemenu-drop {
						.pce-sidemenu-link {
							padding-left: 48px;
							&:before {
								left: 36px;
							}
						}
						.pce-sidemenu-drop {
							.pce-sidemenu-link {
								padding-left: 60px;
								&:before {
									left: 48px;
								}
							}
						}
					}
				}

				&.opened {
					background: $color_gray_10;
					& > .pce-sidemenu-item {
						.pce-sidemenu-link {
							&:before {
								border-color: transparent;
								border-top-color: $color_dark;
								top: 15px; margin-left: -3px;
							}
						}
					}
					& > .pce-sidemenu-drop { display: block; }

					/*.opened {
						background: $color_gray_20;
						.opened {
							background: $color_gray_30;
							.opened {
								background: $color_gray_40;
								.opened {
									background: $color_gray_50;
								}
							}
						}
					}*/
				}
			}
		}
	}//sidemenu

	.pce-search {
		padding: 8px 0;
		.input-group {
			position: relative;
			.field {
				position: relative;
				input {
					float: none !important;
					padding-right: 24px;
					@include border-radius(3px 0 0 3px !important);
				}
				.closer {
					display: none;
					top: 50%;
					margin-top: -8px;
				}
				&.active {
					.closer { display: block; }
				}
			}
			.input-group-addon {
				/*background: $color_blue;
				border-color: $color_blue;
				background: -moz-linear-gradient(top, #2E75D1 0%, #002B81 100%);
				background: -webkit-linear-gradient(top, #2E75D1 0%, #002B81 100%);
				background: linear-gradient(to bottom, #2E75D1 0%, #002B81 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2E75D1', endColorstr='#002B81', GradientType=0 );
				color: $color_white;
				@include border-radius(0 3px 3px 0 !important);*/
			}
		}
	}

	.pce-sort {
		background: $color_gray_10;
		padding: 8px;
	}

	.pce-categories {
		//max-width: 500px;
		.pce-categories__list {
			margin: 0; padding: 0; list-style: none;
			& > li {
				& + li { padding-top: 4px; }
				.pce-categories__head {
					background: $color_gray_03;
					position: relative;
					overflow: hidden;
					min-height: 48px;
					padding: 4px 8px 4px 40px;
					.control {
						background: $color_gray_05;
						position: absolute; top: 0; bottom: 0; left: 0;
						width: 24px;
						text-align: center;
						.chk {
							position: relative;
							height: 24px;
							padding-top: 4px;
							line-height: 20px;
							input { margin: 0 auto; padding: 0; }
							a {
								border: none;
								color: $color_dark;
								&:hover { color: $color_red; }
							}
						}
						.arr {
							position: relative;
							display: block; width: 24px; height: 24px;
							&:before {
								content: '';
								border: 6px solid transparent;
								border-top-color: $color_dark;
								position: absolute; top: 50%; left: 50%;
								margin: -3px 0 0 -6px;
								opacity: 0.5;
							}
							&:hover {
								cursor: pointer;
								&:before { opacity: 1; }
							}
						}
					}
					.actions {
						position: relative;
						z-index: 5;
						float: right;
						margin-top: -2px;
						a {
							border: none;
							display: inline-block;
							vertical-align: middle;
							color: $color_dark;
							visibility: hidden;
							opacity: 0;
							& + a { margin-left: 2px; }
							&:hover { color: $color_blue; }
						}
					}
					.name {
						font-size: 16px;
					}
					.gallery {
						position: relative;
						overflow: hidden;
						ul {
							margin: 0; padding: 0; list-style: none;
							li {
								position: relative;
								overflow: hidden;
								display: inline-block;
								vertical-align: middle;
								img {
									display: block; height: 20px;
								}
								.gallery-all {
									display: none;
									line-height: 18px;
								}
							}
						}
						&.show {
							.hidden { display: inline-block !important; }
							.gallery-all { display: none !important; }
						}
					}
					&:hover {
						background: #B8E986;
						.control { background: darken(#B8E986, 15%); }
						.actions {
							a {
								visibility: visible; opacity: 1;
							}
						}
						.gallery {
							ul {
								li {
									.gallery-all { display: block; }
								}
							}
						}
					}
					&.active {
						background: #2DB92D;
						.control {
							background: darken(#2DB92D, 10%);
						}
					}
					&.disabled {
						opacity: 0.75;
						.control { opacity: 0.4; }
						.actions {
							a {
								visibility: visible;
								opacity: 1;
							}
						}
						.name { opacity: 0.4; }
						.gallery { opacity: 0.4; }
					}
				}
				.pce-categories__drop {
					display: none;
					padding-left: 12px;
					.pce-categories__list {
						& > li {
							padding-top: 4px;
						}
					}
				}

				&.opened {
					& > .pce-categories__head {
						.control {
							.arr {
								&:before {
									border-color: transparent;
									border-bottom-color: $color_dark;
									margin-top: -9px;
								}
							}
						}
					}
					& > .pce-categories__drop {
						display: block;
					}
				}
			}
		}
	}
}