@include body-class(true) {

	.fui-multi-value {
		display: none;
		margin: 0;
		padding: 0;
		border: 0;

		li {
			display: flex;
			margin: $sui-gutter/2 0;
			padding: $sui-gutter/2;
			border: 1px solid #EAEAEA;
			border-radius: $border-radius;
			background-color: $white;

			.fui-move-indicator {
				flex: 0 0 auto;
				margin-top: 10px;
				margin-right: $sui-gutter/2;

				i {
					width: 20px;
					height: 20px;
					cursor: move;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 14px;

					&:before {
						display: block;
					}
				}

				@include media( max-width, md ) {
					margin-right: $sui-gutter-md/2;
				}
			}

			.fui-multi-value-settings {
				flex: 1;

				.fui-top-row {
					position: relative;
					margin: 0 0 5px;

					.sui-form-control {
						padding-right: 38px;
					}

					.fui-multi-value-delete {
						position: absolute;
						top: 9px;
						right: 9px;

						button {
							@extend %fui-button-clear;
							width: 20px;
							height: 20px;

							i:before {
								color: palette( red, default );
								transition: 0.3s ease;
							}

							&:hover i:before {
								color: palette( red, default );
							}
						}
					}
				}
			}

			&:first-child {
				margin-top: 0;

				@include media( max-width, md ) {
					margin-top: 0;
				}
			}

			&:last-child {
				margin-bottom: 0;
				padding: 0;
				border: 0;
				border-radius: 0;
				background-color: transparent;

				@include media( max-width, md ) {
					margin-bottom: 0;
				}
			}

			@include media( max-width, md ) {
				margin: $sui-gutter-md/2 0;
			}
		}

		&-empty {
			display: block;
			padding: $sui-gutter;
			border: 0;
			border-radius: $border-radius;
			background: palette( silver, light );
		}
	}

	.fui-has-values {

		.fui-multi-value {
			display: block;

			&-empty {
				display: none;
			}
		}
	}
}