//
// Field Selector Component
// ------------------------

.field-selector {
	padding: 10px 10px 0;
	margin-bottom: $grid-gutter-width/2;
	border: 1px solid $gray-200;
	border-radius: 0.3rem;
	position: relative;
	overflow: hidden;
	transition: .3s ease-in-out;
	
	&--caption {
		display: block;
		margin-bottom: 5px;
		color: $gray-600;
		font-size: 12px;
	}
	
	.field-selector-title {
		font-weight: 400;
		margin: 0 0 10px;
		color: $primary;
	}
	
	input[type="search"] {
		height: 30px;
		width: 100%;
		margin-bottom: 10px;
		box-shadow: none;
		@include placeholder($gray-500);
	}
	
	.toggle-component {
		position: absolute;
		top: 12px;
		right: 13px;
		cursor: pointer;
		transition: .3s ease-in-out;
	}
	
	.field-list-wrapper {
		margin: 5px -10px;
		max-height: 310px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	.field-list {
		padding-left: 10px;
		padding-right: 5px;
		
		.field-list-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: $gray-600;
			
			.add-all {
				text-transform: uppercase;
				color: $primary;
				font-size: 10px;
				
				&:hover {
					color: $blue-dark;
				}
			}
		}
	}
	
	.select-field {
		color: $primary;
		transition: .2s ease-in-out;
		
		&:before {
			@extend .atmi-plus-circle:before;
		}
		
	}
	
	.select-list {
		
		li {
			list-style: none;
			border: 1px solid $gray-200;
			padding: 5px 10px;
			border-radius: 5px;
			font-size: 16px;
			color: $gray-600;
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
			transition: .2s ease-in-out;
			
			span {
				@include text-overflow;
				margin-right: 3px;
			}
			
			&:hover, &.selected {
				background-color: $primary;
				
				&, .select-field {
					color: $white;
				}
			}
			
			&.selected {
				.select-field {
					&:before {
						@extend .atmi-circle-minus:before;
					}
					
				}
			}
			
			&.hidden {
				display: none;
			}
			
		}
		
	}
	
	&.closed {
		height: 26px;
		
		.toggle-component {
			transform: rotate(180deg);
		}
	}
	
}