@include body-class(true) {

	.fui-multi-name {
		margin: 0;
		padding: $sui-gutter/2;
		border: 1px solid #EAEAEA;
		border-radius: $border-radius;
		background-color: palette( silver, light );

		.fui-toggle-multi-name {
			@extend .sui-toggle;

			span {
				@extend .sui-toggle-slider;
			}
		}

		.fui-multi-name-action {
			display: flex;
			align-items: center;

			.fui-multi-name-title {
				flex: 1;
				margin-right: $sui-gutter/2;

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

			.fui-open-indicator {
				flex: 0 0 auto;
				
				button {
					@extend %fui-button-clear;
					width: 20px;
					height: 20px;
					font-size: 16px;

					i {
						width: 20px;
						height: 20px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						transition: 0.2s linear;
					}
				}
			}
		}

		.fui-multi-name-content {
			display: none;
			margin-top: $sui-gutter/2;

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

		&.fui-open {

			.fui-multi-name-action {

				.fui-open-indicator {

					button i {
						transform: rotate(180deg);
					}
				}
			}

			.fui-multi-name-content {
				display: block;
			}
		}

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