#neos-aloha-topmenu {
	float: left;

	// Aloha Link editor (for entering the link target URL) is displayed as some "flyout"
	#aloha-attribute-field-editLink {
		position: absolute;
		top: $unit;
		left: 0px;
		border: $relatedMargin solid $grayDark;
		padding: $relatedMargin $defaultMargin;
		color: white !important;
		background: $grayLight;
		@include transition-property(margin-left);
		@include transition-duration(.2s);
		@include font();
		@include box-sizing(border-box);
		font-weight: 400;
		width: $unit * 12 !important;

		&:focus {
			outline: none;
		}

		&.ui-autocomplete-loading {
			background-image: url('../Images/ajax-preloader-3f3f3f.gif');
			background-position: ($unit * 11) center;
			background-repeat: no-repeat;
		}

		.neos-navigate-panel-open & {
			margin-left: $navigatePanelWidth;
		}

		.neos-menu-panel-open.neos-menu-panel-sticky & {
			margin-left: $menuButtonWidth;
		}

		.neos-menu-panel-open.neos-menu-panel-sticky.neos-navigate-panel-open & {
			margin-left: $menuButtonWidth + $navigatePanelWidth - 1px;
		}
	}

	.aloha {
		.aloha-ui-hidden {
			display: none;
		}

		.aloha-ui-menubutton-container {
			display: inline-block;

			.ui-button .ui-button-text {
				display: block;
			}

			a {
				color: $textOnGray;
				@include transition(none);
				line-height: $unit;
				padding-left: $defaultMargin;
				text-align: center;

				&:hover {
					background: $blue;
				}

				&.ui-state-focus {
					border: none;
				}
			}

			ul.ui-widget-content {
				background: $grayMedium;
				border: none;
				@include box-shadow(1px 2px 5px $grayDark);
				border-top: 1px solid $grayLight;
				min-width: 67px;

				ul ul,
				ol ol {
					display: none !important;
				}
			}

			ul li,
			ol li {
				list-style: inherit;
				border: none;

				+ li {
					border-top: 1px solid $grayLight;
				}
			}

			.aloha-list-templates ul {
				list-style-type: disc;
				list-style-position: inside;
			}

			.aloha-list-templates ol {
				list-style-type: decimal;
				list-style-position: inside;
			}

			.aloha-list-templates ul ul, ol ul {
				list-style-type: circle;
				list-style-position: inside;
				margin-left: 15px;
			}

			.aloha-list-templates ol ol, ul ol {
				list-style-type: lower-latin;
				list-style-position: inside;
			}

			/**
			 * Predefined list styles
			 **/
			.aloha-list-templates ul.neos-list-disc, ul.neos-list-disc 									{ list-style-type: disc; }
			.aloha-list-templates ul.neos-list-circle, ul.neos-list-circle 								{ list-style-type: circle; }
			.aloha-list-templates ul.neos-list-square, ul.neos-list-square 								{ list-style-type: square; }
			.aloha-list-templates ol.neos-list-decimal, ol.neos-list-decimal								{ list-style-type: decimal; }
			.aloha-list-templates ol.neos-list-decimal-leading-zero, ol.neos-list-decimal-leading-zero	{ list-style-type: decimal-leading-zero; }
			.aloha-list-templates ol.neos-list-lower-roman, ol.neos-list-lower-roman						{ list-style-type: lower-roman; }
			.aloha-list-templates ol.neos-list-upper-roman, ol.neos-list-upper-roman						{ list-style-type: upper-roman; }
			.aloha-list-templates ol.neos-list-lower-greek, ol.neos-list-lower-greek 						{ list-style-type: lower-greek; }
			.aloha-list-templates ol.neos-list-lower-latin, ol.neos-list-lower-latin						{ list-style-type: lower-latin; }
			.aloha-list-templates ol.neos-list-upper-latin, ol.neos-list-upper-latin 						{ list-style-type: upper-latin; }
			.aloha-list-templates dl.neos-list-red, dl.neos-list-red										{ color: red; }
			.aloha-list-templates dl.neos-list-blue, dl.neos-list-blue									{ color: blue; }
			.aloha-list-templates dl.neos-list-green, dl.neos-list-green									{ color: green; }
		}

		// Icons
		.ui-button {
			background: none;
			border: 0px;
			padding: 0;

			.ui-button-icon-only {
				width: $wideMargin;
			}

			.ui-button-text {
				display: none;
			}

			.aloha-icon {
				@extend .fas;
				background: none;
				-webkit-font-smoothing: antialiased;
				font-size: 14px;
				color: white;
				display: inline;
				position: relative;
				left: auto;
				top: auto;
				margin: 0px;
				padding: 0px;
				text-indent: 0px;
			}

			&.ui-state-hover,
			&.aloha-button-active {
				.aloha-icon {
					color: $blue;
				}
			}

			.aloha-icon-createTable {
				@extend .#{$fa-css-prefix}-table;
			}

			.aloha-icon-toggledragdrop {
				@extend .#{$fa-css-prefix}-arrows-alt;
			}

			.aloha-icon-bold,
			.aloha-icon-strong {
				@extend .#{$fa-css-prefix}-bold;
			}

			.aloha-icon-italic,
			.aloha-icon-emphasis {
				@extend .#{$fa-css-prefix}-italic;
			}

			.aloha-icon-underline {
				@extend .#{$fa-css-prefix}-underline;
			}

			.aloha-icon-subscript {
				@extend .#{$fa-css-prefix}-subscript;
			}

			.aloha-icon-superscript {
				@extend .#{$fa-css-prefix}-superscript;
			}

			.aloha-icon-strikethrough {
				@extend .#{$fa-css-prefix}-strikethrough;
			}

			.aloha-icon-link {
				@extend .#{$fa-css-prefix}-link;
			}

			.aloha-icon-formatless-paste {
				@extend .#{$fa-css-prefix}-paste;
			}

			.aloha-icon-align-left {
				@extend .#{$fa-css-prefix}-align-left;
			}

			.aloha-icon-align-left {
				@extend .#{$fa-css-prefix}-align-left;
			}

			.aloha-icon-align-center {
				@extend .#{$fa-css-prefix}-align-center;
			}

			.aloha-icon-align-justify {
				@extend .#{$fa-css-prefix}-align-justify;
			}

			.aloha-icon-align-right {
				@extend .#{$fa-css-prefix}-align-right;
			}

			.aloha-icon-orderedlist {
				@extend .#{$fa-css-prefix}-list-ol;
			}

			.aloha-icon-unorderedlist {
				@extend .#{$fa-css-prefix}-list-ul;
			}

			.aloha-icon-indent {
				@extend .#{$fa-css-prefix}-indent;
			}

			.aloha-icon-outdent {
				@extend .#{$fa-css-prefix}-outdent;
			}

			.aloha-icon-code {
				@extend .#{$fa-css-prefix}-code;
			}

			.aloha-icon-strong {
				@extend .#{$fa-css-prefix}-bold;
			}

			.aloha-icon-emphasis {
				@extend .#{$fa-css-prefix}-italic;
			}

			.aloha-icon-strikethrough {
				@extend .#{$fa-css-prefix}-strikethrough;
			}
		}
	}
}