.tf-array-item {
	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;

	&: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;
		}
	}

	> * {
		flex-grow: 1;
		margin: 0;
		padding: $padding-normal;
	}

	.control {
		flex-grow: 0;
		flex-shrink: 0;

		border-right: 1px solid $gray-lighter;
		display: flex;
		flex-direction: column;
		padding: 0 $padding-small;

		.delete {
			margin: $padding-normal 0 ($padding-normal * 2) 0;
		}

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

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

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