@import '../../variables.less';
@import '../../mixins.less';
/***************
fields-nav.less
*****************/
#ecf-creator {
	.ecf-page-trash {
		.ecf-field-filters {
			.ecf-fields-nav {
				> li {
					&.ecf-active {
						color: @accent;
					}
					&.cancel {
						color: @primary;
					}
				}
			}
		}
	}
	.ecf-field-filters {
		.ecf-fields-nav {
			z-index: 9;
			position: relative;
			margin: 0;
			align-items: center;
			height: 38px;
			> li {
				color: @text_2;
				margin: 0;
				padding: 3px 0;
				font-size: 18px;
				font-weight: 400;
				border-width: 0;
				> .caret-down {
					position: relative;					
					top: 2px;
					right: 0;
					font-size: 14px;
				}
				&.ecf-bold {
					.dropdown-wrapper.small {
						.dropdown-wrapper-inner {
							.select-box {
								color: @black;
								font-weight: 600;
								&:after {
									border-color: @black transparent transparent transparent;
								}
								> .caret-down {	
									color: @black;							
								}
							}
						}
					}
				}
				&.ecf-active {
					color: @primary;
					font-weight: 600;
				}
				&:last-child {
					&:after {
						display: none;
					}
				}
				&:after {
					.inline-flex();
					.roundedcorners(5px);
					background: @grey_4;
					content: '';
					width: 3px;
					height: 12px;
					margin: 0 15px;
				}	
				&.ecf-select-all-wrapper {
					color: @text_3;
					.ecf-select-all-toggler {
						width: 24px;
						height: 16px;
						.inline-flex();
						position: relative;			
						&.all-selected {
							> span {
								background: @primary;
								color: @white;
								border-color: @primary;
								> span {
									.flex();
								}
							}
						}		
						> span {
							.roundedcorners(15px);
							.flex();
							border: 2px solid @grey_4;
							position: absolute;
							height: 18px;
							width: 18px;
							top: 1px;
					    left: 0px;
					    justify-content: center;
					    align-items: center;
					    .material-icon {
					    	.inline-flex();
					    }
						}
					}			
				}
				&.disabled {
					.opacity(0.5);
				}
				&.cancel {
					color: @accent;
					span {
						font-weight: 600;
						color: @text_3;
						&.arrow-right {
							font-weight: normal;
							color: @accent;
						}
					}
				}
				.dropdown-wrapper.small {
					display: inline-flex;
					height: 20px;
					line-height: 20px;
					top: 0px;
					.dropdown-wrapper-inner {
						.select-box {
							span {
								color: @text_3;
								font-size: 85%;
								text-transform: none;
								&.caret-down {
									font-size: 14px;
									right: 7px;
									top: 3px;
									color: @text_1;
								}
							}
						}
					}
					.dropdown-wrapper-inner {
						.selected {
							font-weight: 600;
						}
						.select-box {
							color: @text_2;
							height: auto;
							line-height: 19px;
							background: transparent;
							min-width: auto;
							padding-right: 24px;
							padding-left: 0;
							font-size: 18px;
							font-weight: 400;
							> div {
								font-weight: 400;
							}
							&:after {
								right: 3px;
							}
						}
						.dropdown-holder {
					    top: calc(~"100% + 10px");	
					    transform-origin: 64px top;						
							min-width: 265px;
					    right: auto;
					    left: 0;
					    &:before {
					    	left: 54px;
					    	right: auto;
					    	display: none;
					    }
					    ul {
					    	li {
					    		a {
					    			padding-left: 30px;
					    			.icon {
					    				top: 9px;
					    			}
					    		}
					    	}
					    }
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1350px) {
	#ecf-creator {
		.ecf-field-filters {
			.ecf-fields-nav {
				flex-wrap: wrap;
				> li {
					font-size: 16px;
					&:after {
						margin: 0 10px;
						width: 1px;
						height: 10px;
					}
					.dropdown-wrapper.small {
						.dropdown-wrapper-inner {
							.select-box {
								font-size: 16px;
							}
						}
					}
					.ecf-button {
						.ecf-button-inner {
							font-size: 14px;
							padding: 0 10px;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#ecf-creator {
		.ecf-field-filters {
			.ecf-fields-nav {
				width: 100%;
				justify-content: center;
				margin-bottom: 15px;
				> li {
					font-size: 16px;
					&.ecf-select {
						display: none;
					}
					&:after {
						width: 3px;
						margin: 0 10px;
					}
				}
			}
		}
	}
}