//
// Selected Field Component
// ------------------------

.selected-field {
	box-shadow: 0 0 6px 0 rgba($black, 0.2);
	margin-bottom: 15px;
	border-radius: $border-radius-base;
	padding: 8px 10px;
	text-align: left;
	overflow: hidden;
	height: 50px;
	position: relative;
	box-sizing: border-box;
	
	&.open {
		height: auto;
		overflow: visible;
	}
	
	&.ui-sortable-helper {
		background: rgba($white, .7);
		height: 50px !important;
		
		.selected-field {
			&--filters, &--settings {
				display: none;
			}
		}
	}
	
	&.ui-sortable-placeholder {
		border: 1px dashed $gray-300;
		box-shadow: none;
		visibility: visible !important;
	}
	
	&.overlay {
		pointer-events: none;
		
		&:before {
			content: '';
			@include overlay($zindex: 100);
		}
		
		&:after {
			content: '';
			@include loader($size: 30px, $color: $white, $border-size: 2.4px, $zindex: 101);
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
	
	&--header {
		display: flex;
		align-items: center;
		height: 100%;
		min-height: 34px;
		
		.drag-item {
			color: $gray-200;
			width: 20px;
			margin-left: -20px;
			margin-top: 8px;
			
			&:hover {
				color: $gray-500;
			}
		}
	}
	
	&--title {
		margin: 0;
		font-size: 16px;
		@include text-overflow;
		max-width: 290px;
		
		> span {
			display: inline-block;
			vertical-align: middle;
		}
	}
	
	&--desc {
		flex-grow: 1;
		margin-left: 5px;
	}
	
	&--actions {
		font-size: 17px;
		
		.atum-icon {
			padding-left: 5px;
			color: $gray-500;
			cursor: pointer;
			transition: .2s ease-in-out;
			user-select: none;
			
			&.field-settings {
				&:hover, &.active {
					color: $primary;
				}
				
				&.with-settings {
					color: $primary;
					
					&:before {
						content: $atmi-cog-solid;
					}
				}
			}
			
			&.field-filters {
				&:hover, &.active {
					color: $warning;
				}
				
				&.with-filters {
					color: $warning;
					
					&:before {
						content: $atmi-funnel-solid;
					}
				}
			}
			
			&.field-remove {
				&:hover, &.active {
					color: $danger;
				}
			}
			
			&.field-hidden {
				color: $danger;
				cursor: default;
			}
			
			&.active {
				
				&.field-settings {
					&:before {
						content: $atmi-cog-solid;
					}
				}
				
				&.field-filters {
					&:before {
						content: $atmi-funnel-solid;
					}
					
				}
				
			}
			
		}
	}
	
	&--filters {
		margin-top: $grid-gutter-width/1.5;
		
		h3 {
			font-size: 14px;
		}
		
		table {
			width: 100%;
			font-size: 12px;
			border-spacing: 0;
			margin-top: 10px;
			
			th, td {
				border-top: 1px solid $gray-200;
				padding: 10px 5px;
				line-height: 1em;
				vertical-align: middle;
				font-weight: normal;
				
				.select2-container {
					width: 150px !important;
				}
				
				input {
					box-shadow: none;
					height: 30px;
					margin: 0;
					width: 100% !important;
				}
				
				&:last-child {
					text-align: center;
				}
			}
			
			thead {
				th {
					color: $gray-500;
					font-weight: bold;
				}
			}
			
			.separator td {
				height: 5px;
			}
			
			.atum-icon {
				font-size: 1.4em;
				color: $gray-500;
				cursor: pointer;
				user-select: none;
				
				&.edit-rule {
					&:hover {
						color: $primary;
					}
				}
				
				&.add-rule {
					&:hover {
						color: $warning;
					}
				}
				
				&.remove-rule {
					&:hover {
						color: $danger;
					}
				}
				
				&.save-rule {
					&:hover {
						color: $success;
					}
				}
			}
			
			tbody {
				tr {
					&:nth-child(odd) {
						td {
							background-color: $gray-100;
						}
					}
					
					&.editing {
						td {
							background-color: $blue-light;
							
							.edit-rule {
								color: $primary;
							}
						}
					}
				}
			}
			
			.sel-actions {
				max-width: 50px;
				
				.save-rule {
					display: none;
				}
			}
			
			tfoot {
				.editing {
					.save-rule {
						display: inline-block;
					}
					
					.add-rule {
						display: none;
					}
				}
			}
			
		}
		
	}
	
	&--settings {
		display: table;
		width: 100%;
		
		h3 {
			font-size: 14px;
			margin-bottom: $grid-gutter-width/2;
		}
		
		.setting-row {
			display: table-row;
			
			label, &--field {
				display: table-cell;
				padding-bottom: $grid-gutter-width/2;
				vertical-align: middle;
			}
			
			label {
				font-size: 12px;
				color: $blue-dark;
				width: 200px;
				
				.atum-icon {
					&:hover {
						color: $primary;
						cursor: help;
					}
				}
			}
			
			input {
				box-shadow: none;
			}
			
			&--field {
				text-align: left;
			}
			
		}
		
	}
	
}