#neos-context-bar .neos-content-dimension-selector {
	@include clearfix;
	position: relative;
	float: left;
	border-right: 1px solid $grayLight;
	@include box-sizing(border-box);
	min-width: $unit * 8 + $defaultMargin * 2;

	.neos-inline-editing-active & {
		display: none;
	}

	&.active {
		background-color: $grayDark;

		.neos-content-dimension-selector-dimensions {
			display: block;
		}
	}

	.neos-contentelement-selected & {
		display: none;
	}

	.neos-content-dimension-selector-summary {
		cursor: pointer;
		@include clearfix;
		@include user-select(none);
		padding-left: $defaultMargin;
		padding-right: $defaultMargin + $unit + 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		@include box-sizing(border-box);

		&::before {
			@extend .fas;
			content: fa-content($fa-var-caret-down);
			font-size: 14px;
			position: absolute;
			right: 0;
			width: $unit;
			line-height: $unit;
			text-align: center;
		}

		.neos-content-dimension-selector-dimension {
			line-height: $unit;

			~ .neos-content-dimension-selector-dimension {
				padding-left: $defaultMargin;
			}

			i {
				width: $defaultMargin + $relatedMargin;
				text-align: center;
				color: $textSubtleLight;
				font-size: 16px;
				line-height: 16px;
			}
		}
	}

	.neos-content-dimension-selector-dimensions {
		display: none;
		position: absolute;
		top: $unit;
		left: 0;
		width: calc(100% + 1px);
		min-width: $unit * 8 + $defaultMargin * 2;
		background-color: $grayDark;
		border-right: 1px solid $grayLight;
		border-bottom: 1px solid $grayLight;
		padding-top: $relatedMargin + $tightMargin + 1;
		padding-left: $defaultMargin;
		padding-right: $defaultMargin;
		@include box-sizing(border-box);

		.neos-content-dimension-selector-dimension {
			padding-bottom: $defaultMargin;

			i {
				width: $defaultMargin + $relatedMargin;
				font-size: 16px;
				line-height: 16px;
			}

			label {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			select {
				width: $unit * 8;
			}

			.chosen-container {
				width: $unit * 8 !important;
			}
		}

		.neos-content-dimension-selector-dimensions-footer {
			margin-bottom: $defaultMargin;

			.neos-button {
				float: none;

				&.neos-button-success {
					background-color: $green;
				}
			}

		}

		.neos-content-dimension-selector-initial-translation-dialog {
			white-space: normal;

			.neos-button {
				border: none;
				float: none;

				&.neos-close {
					float: right;
					background-color: $grayDark;

					&:hover {
						background-color: $blue;
					}
				}
			}
		}
	}
}