$tf-filterwidget-shadow-color: $shadow !default;

.ArrayFieldTemplate {
	.addBtn {
		margin-bottom: 30px;
	}

	.arrayElement {
		display: flex;
		background: $wild-sand;
		border: 1px solid transparent;
		border-radius: $border-radius-large;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
		transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
		margin-bottom: $padding-normal;

		&.closed {
			.delete {
				visibility: hidden;
			}
			.element fieldset div:not(:first-child) {
				display: none;
			}
			&:hover {
				.delete {
					visibility: initial;
				}
			}
		}

		&:hover {
			background: $white;
			box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
			border: 1px solid $gallery;

			.delete {
				color: $brand-danger;
			}
		}

		.control {
			border-right: 1px solid $wild-sand;
			display: flex;
			flex-direction: column;
			padding: 0 $padding-small;
			.orderaction {
				display: flex;
				flex-direction: column;
				padding-top: ($padding-normal * 2);
			}

			.delete {
				margin: $padding-normal 0 $padding-small 0;
				&.hidden {
					display: none;
					&:hover {
						display: initial;
					}
				}
			}

			button {
				background: transparent;
				border: 0;
				margin: 0 0 1em 0;
				color: $dark-silver;

				&:hover {
					color: $dove-gray;
				}

				&:disabled {
					color: $silver;
					cursor: not-allowed;
				}
			}
		}

		.element {
			flex-grow: 1;
			padding: 0;
			overflow: hidden;

			> div {
				padding: 0;
				margin: 0;
			}

			fieldset {
				> div:first-child {
					border-bottom: 1px solid $wild-sand;
					// to forbid children selection of text on double click
					user-select: none;

					div {
						display: inline-block;
						width: inherit;
						max-width: 100%;

						legend {
							color: $gray-light;
							font-size: $font-size-base;
							margin: 0;
							max-width: 100%;
							overflow: hidden;
							padding: $padding-normal ($padding-large * 2) $padding-normal $padding-normal;
							text-overflow: ellipsis;
							white-space: nowrap;
							// to allow classic text selection
							user-select: text;

							&:hover {
								cursor: pointer;
								color: $dove-gray;
							}

							strong {
								color: $gray-dark;
							}
						}
					}

					:global(.toggle) {
						background: transparent;
						border: 0;
						position: absolute;
						top: 0;
						right: 0;
						padding: $padding-normal;
					}
				}

				div:first-child {
					margin: 0;
				}

				> div {
					margin: $padding-normal;
				}
			}
		}
	}
}