@import 'cadmin';
@import 'sidebar';

$table-responsive-margin-left-md: 375px !default;
$user-icon-color-0: $cadmin-secondary !default;
$user-icon-color-1: $cadmin-blue !default;
$user-icon-color-2: $cadmin-orange !default;
$user-icon-color-3: $cadmin-red !default;
$user-icon-color-4: $cadmin-teal !default;
$user-icon-color-5: $cadmin-pink !default;
$user-icon-color-6: $cadmin-green !default;
$user-icon-color-7: $cadmin-purple !default;
$user-icon-color-8: $cadmin-yellow !default;
$user-icon-color-9: $cadmin-cyan !default;

html#{$cadmin-selector} {
	.cadmin {
		.form-control-sm[contenteditable] {
			height: auto;
			min-height: $cadmin-input-height-sm;

			p {
				margin-bottom: 0;
			}
		}

		.lfr-ddm-field-group {
			margin-bottom: 20px;
		}

		.overlay-content .open > .dropdown-menu {
			display: block;
			position: static;
		}

		&.modal.show,
		.modal.show {
			display: block;
		}

		&.modal-dialog,
		.modal-dialog {
			&:not(.dialog-iframe-modal):not(.modal-full-screen) {
				position: relative;
			}

			&.dialog-iframe-modal {
				max-width: none;
			}

			&.modal-dialog-sm {
				max-width: $cadmin-modal-md;
			}

			.yui3-resize-handles-wrapper {
				pointer-events: all;

				.yui3-resize-handle-inner-br {
					background-position: -30px 0;
					background-repeat: no-repeat;
					bottom: 0;
					display: block;
					height: 15px;
					overflow: hidden;
					right: 0;
					text-indent: -99999em;
					width: 15px;
				}
			}
		}

		.modal-body.dialog-iframe-bd {
			overflow: hidden;
			padding: 0;
		}

		.yui3-widget-content-expanded {
			height: 100%;
		}

		.loadingmask-message {
			left: 50%;
			padding: 2px;
			position: absolute;
			top: 50%;
		}

		.loadingmask-message-content {
			-webkit-animation: loading-animation 1.2s infinite ease-out;
			animation: loading-animation 1.2s infinite ease-out;
			background: transparent;
			border-radius: 50%;
			border-width: 0;
			clear: both;
			color: transparent;
			height: 1em;
			margin: 0;
			overflow: hidden;
			padding: 0;
			position: relative;
			transform: translateZ(0);
			width: 1em;
		}

		&.modal-open .modal {
			display: block;
		}

		.user-icon-color-0 {
			color: $user-icon-color-0;
		}

		.user-icon-color-1 {
			color: $user-icon-color-1;
		}

		.user-icon-color-2 {
			color: $user-icon-color-2;
		}

		.user-icon-color-3 {
			color: $user-icon-color-3;
		}

		.user-icon-color-4 {
			color: $user-icon-color-4;
		}

		.user-icon-color-5 {
			color: $user-icon-color-5;
		}

		.user-icon-color-6 {
			color: $user-icon-color-6;
		}

		.user-icon-color-7 {
			color: $user-icon-color-7;
		}

		.user-icon-color-8 {
			color: $user-icon-color-8;
		}

		.user-icon-color-9 {
			color: $user-icon-color-9;
		}

		// Taglib Move Boxes

		.taglib-move-boxes {
			margin-bottom: 1em;

			label {
				border-bottom: 1px solid transparent;
				display: block;
				margin-bottom: 5px;
				padding: 5px;
			}

			.toolbar {
				text-align: center;
			}

			.arrow-button img {
				border-width: 0;
				height: 16px;
				width: 16px;
			}

			.choice-selector {
				width: 100%;

				label {
					background: #ebf1f9;
					border-bottom-color: #8db2f3;
				}
			}

			.field-content {
				margin-bottom: 0;
			}

			.move-arrow-buttons {
				margin-top: 5em;

				.arrow-button {
					display: block;
				}
			}

			.sortable-container {
				margin-top: 10px;

				.btn.edit-selection {
					margin-bottom: 10px;
				}

				.move-option {
					background-color: transparent;
					border-top: 1px solid #ddd;
					display: none;
					margin: 2px 0;
					padding: 2px;
					position: relative;

					&.selected {
						display: block;
					}

					&.move-option-dragging {
						background-color: #fafafa;
					}

					.checkbox,
					.handle {
						position: absolute;
					}

					.checkbox {
						display: none;
						margin: 7px 0 0 5px;
					}

					.handle {
						color: #999;
						cursor: pointer;
						font-size: 1.5em;
						padding: 6px;
					}

					.title {
						font-size: 1.2em;
						margin: 1px 0 1px 30px;
					}
				}

				&.edit-list-active .move-option {
					display: block;

					.checkbox {
						display: inline-block;
					}

					.handle {
						display: none;
					}
				}
			}
		}

		&.mobile .taglib-move-boxes .selector-container {
			display: none;
		}

		// CKEditor

		.cke_chrome {
			border: 1px solid $cadmin-gray-300;

			.cke_bottom {
				padding: 6px 8px 2px;
			}

			span.cke_top {
				padding: 6px 7px;
			}

			.cke_contents {
				border: 1px solid #e7e7e7;
				margin: 0 -1px;
			}

			&.cke_focus .cke_contents {
				border-color: $cadmin-primary-l1;
			}

			.cke_reset_all,
			.cke_reset_all a,
			.cke_reset_all textarea {
				font: 12px sans-serif;
				text-decoration: none;
			}

			a.cke_button {
				border: 2px solid transparent;
				margin: 0 1px;
				padding: 6px;

				.cke_button_icon {
					height: 16px;
					width: 16px;
				}

				.cke_button_label {
					color: $cadmin-gray-600;
					font-weight: 600;
					margin-top: 1px;
					padding-left: 3px;
				}
			}

			.cke_combo_on a.cke_combo_button,
			.cke_combo_off a.cke_combo_button:hover,
			.cke_combo_off a.cke_combo_button:active,
			a.cke_button_off:hover,
			a.cke_button_off:active {
				background-color: rgba(39, 40, 51, 0.04);
			}

			a.cke_button_on {
				background-color: rgba(39, 40, 51, 0.06);
			}

			a.cke_button__source.cke_button_off
				+ a.cke_button__expand.cke_button_disabled {
				display: none;
			}

			a.cke_combo_button {
				border: 2px solid transparent;
				margin: 0 4px;
				padding: 6px 18px;

				.cke_combo_arrow {
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-top: 4px solid $cadmin-gray-600;
				}

				.cke_combo_open {
					margin: 1px 1px 1px 10px;
				}

				.cke_combo_text {
					color: $cadmin-gray-600;
					font-weight: 600;
				}
			}

			.cke_resizer {
				border-width: 8px 8px 0 0;
				height: 0;
				margin: 6px -4px 2px;
			}

			.cke_toolgroup {
				margin: 1px 4px 6px 0;
				padding-right: 3px;
			}

			.CodeMirror {
				font-family: monospace;

				.CodeMirror-gutters {
					background-color: #f7f7f7;
					border-right: 1px solid #ddd;
				}

				.CodeMirror-linenumber {
					color: #999;
					padding: 0 3px 0 5px;
					text-align: right;
				}

				.CodeMirror-cursor {
					border-left: 1px solid $cadmin-black;
				}

				.CodeMirror-scroll {
					height: 100%;
					margin-bottom: -50px;
					margin-right: -50px;
					overflow: scroll;
					padding-bottom: 50px;
				}

				pre.CodeMirror-line,
				pre.CodeMirror-line-like {
					font-family: inherit;
					margin: 0;
				}

				.CodeMirror-scroll,
				.CodeMirror-sizer,
				.CodeMirror-gutter,
				.CodeMirror-gutters,
				.CodeMirror-linenumber {
					box-sizing: content-box;
				}

				.CodeMirror-measure {
					visibility: hidden;
				}

				.CodeMirror-selected {
					background: #d9d9d9;
				}

				&.CodeMirror-wrap pre.CodeMirror-line,
				&.CodeMirror-wrap pre.CodeMirror-line-like {
					white-space: pre-wrap;
					word-break: normal;
					word-wrap: break-word;
				}

				&.CodeMirror-focused .CodeMirror-selected {
					background: #d7d4f0;
				}

				&.cm-s-default {
					.cm-header {
						color: blue;
					}
					.cm-quote {
						color: #090;
					}
					.cm-keyword {
						color: #708;
					}
					.cm-atom {
						color: #219;
					}
					.cm-number {
						color: #164;
					}
					.cm-def {
						color: #00f;
					}
					.cm-variable-3,
					.cm-type {
						color: #085;
					}
					.cm-comment {
						color: #a50;
					}
					.cm-string {
						color: #a11;
					}
					.cm-string-2 {
						color: #f50;
					}
					.cm-qualifier,
					.cm-meta {
						color: #555;
					}
					.cm-builtin {
						color: #30a;
					}
					.cm-bracket {
						color: #997;
					}
					.cm-tag {
						color: #170;
					}
					.cm-link,
					.cm-attribute {
						color: #00c;
					}
					.cm-hr {
						color: #999;
					}
				}

				.cm-negative {
					color: #d44;
				}

				.cm-positive {
					color: #292;
				}

				.cm-header,
				.cm-strong {
					font-weight: bold;
				}

				.cm-em {
					font-style: italic;
				}

				.cm-link {
					text-decoration: underline;
				}

				.cm-strikethrough {
					text-decoration: line-through;
				}

				.cm-s-default .cm-error,
				.cm-invalidchar {
					color: #f00;
				}
			}
		}

		// Taglib Portlet Preview

		.taglib-portlet-preview {
			&.show-borders {
				border: 1px solid #828f95;
				margin-bottom: 1em;
				padding: 3px 3px 1em;

				.title {
					background-color: #d3dadd;
					font-size: 1.4em;
					font-weight: bold;
					padding: 0.5em;
				}
			}

			.preview {
				margin: 1em;
				min-height: 90px;
			}
		}

		// Asset Categories Selector Web

		.select-category-filter {
			background: $cadmin-white;
			border-bottom: 1px solid $cadmin-gray-300;
			margin-bottom: 24px;
			padding: 12px;
		}

		// Lfr Source Editor

		&.lfr-fullscreen-source-editor-header {
			height: 40px;
			margin-right: 4px;
			margin-top: 4px;
			min-height: 40px;
		}

		// Lfr Upload Container

		.upload-drop-intent .lfr-upload-container .upload-target {
			z-index: 100;
		}

		.upload-drop-active .lfr-upload-container .upload-target {
			background-color: #ddedde;
			border-color: #7d7;
			border-style: dashed;
		}

		&.mobile .lfr-upload-container .upload-target .drop-file-text {
			display: none;
		}

		.lfr-upload-container {
			margin-bottom: 1em;

			input[type='file'] {
				line-height: 0;
			}

			.upload-target {
				border: 3px dashed $cadmin-gray-300;
				margin-bottom: 1em;
				min-height: 30px;
				padding: 30px 0;
				position: relative;
				text-align: center;

				h4 span {
					display: block;
					margin: 5px 0;
					text-transform: lowercase;
				}

				.or-text {
					font-size: 0.8em;
				}

				.drop-file-text {
					font-weight: normal;
				}
			}

			.manage-upload-target {
				padding: 5px 0 0;
				position: relative;

				.select-files {
					margin: 0 1.125rem 1.125rem;
				}
			}

			.browse-button-container {
				padding-top: 5px;
			}

			a {
				&.browse-button {
					background-repeat: no-repeat;
					color: white;
					font-size: 1.2em;
					font-weight: bold;
					text-decoration: none;
				}

				&.clear-uploads {
					background-repeat: no-repeat;
					float: right;
					padding-left: 16px;
				}

				&.cancel-uploads {
					background-repeat: no-repeat;
					float: right;
					margin-right: 0;
				}
			}

			.upload-file {
				&.upload-complete.file-saved {
					padding-left: 25px;
				}

				.file-title {
					display: inline-block;
					max-width: 95%;
					overflow: hidden;
					padding-right: 16px;
					text-overflow: ellipsis;
					vertical-align: middle;
					white-space: nowrap;
				}

				.icon-file {
					font-size: 40px;
				}
			}

			.upload-list-info {
				margin: 1em 0 0.5em;

				h4 {
					font-size: 1.3em;
				}
			}

			.cancel-button {
				color: $cadmin-secondary;
				margin-top: 1px;
				position: absolute;
				right: 5px;
				top: 50%;
				white-space: nowrap;

				.cancel-button-text {
					display: none;
					margin-left: 5px;
				}

				&:hover .cancel-button-text {
					display: inline;
				}

				.lexicon-icon {
					height: 12px;
				}
			}

			.lfr-button {
				background: no-repeat 0 50%;
				padding: 2px 0 2px 20px;
			}

			.delete-button {
				color: $cadmin-secondary;
			}

			.delete-button-col {
				padding-right: 10px;
			}

			.file-added .success-message {
				float: right;
				font-weight: normal;
			}

			.upload-error {
				opacity: 1;
				padding-left: 25px;
			}

			.upload-complete .cancel-button,
			.delete-button,
			.upload-complete.file-saved .delete-button,
			.upload-complete.upload-error .delete-button {
				display: none;
			}

			.multiple-files {
				.upload-error {
					background-color: #fdd;
					background-repeat: no-repeat;
					background-size: 5px 5px;
					border-color: $cadmin-danger-d2;
					color: $cadmin-danger-d2;
					font-weight: normal;
					margin-bottom: 16px;
					padding: 8px 8px 8px 24px;

					.error-message {
						display: block;
					}
				}

				.upload-complete.file-saved,
				.upload-complete.upload-error {
					.form-check-middle-left {
						.card-body {
							padding-left: 1rem;
						}
						.custom-control-label {
							display: none;
						}
					}
				}
			}

			.single-file .upload-error {
				list-style: none;
				margin-top: 1em;

				.upload-error-message {
					margin-bottom: 0.5em;
				}
			}

			.upload-complete {
				padding-left: 5px;

				.error-message,
				.success-message {
					font-weight: bold;
					margin-left: 1em;
				}

				.delete-button {
					display: inline-block;
				}

				.select-file:disabled + .custom-control-label {
					display: none;
				}
			}

			.progress {
				display: none;
				margin-top: 0.5rem;
			}

			.file-uploading {
				background-color: #ffc;

				.progress {
					display: flex;
				}
			}
		}

		.select-files {
			float: left;
			line-height: 0;
			margin-right: 2px;
			padding: 0 0 0 5px;
		}

		.lfr-search-container-wrapper {
			&.lfr-search-container-fixed-first-column {
				position: relative;

				.table-responsive {
					@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
						margin-left: $table-responsive-margin-left-md;
						width: auto;
					}

					.table {
						position: static;

						.lfr-search-iterator-fixed-header {
							left: 12px;
							position: fixed;
							right: 12px;
							top: -1px;
							z-index: $cadmin-zindex-sticky;

							> th {
								display: block;
								padding: 0;

								.lfr-search-iterator-fixed-header-inner-wrapper {
									overflow-x: hidden;

									@include media-breakpoint-up(
										sm,
										$cadmin-grid-breakpoints
									) {
										margin-left: $table-responsive-margin-left-md;
									}

									table {
										border-collapse: collapse;
										width: 100%;

										th {
											border-radius: 0;
										}
									}
								}
							}
						}

						td,
						th {
							width: auto;

							&:first-child {
								@include media-breakpoint-up(
									sm,
									$cadmin-grid-breakpoints
								) {
									left: 0;
									position: absolute;
									right: 15px;
								}
							}
						}

						th {
							height: auto;
						}
					}
				}

				.lfr-description-column,
				.lfr-role-column {
					max-width: $table-responsive-margin-left-md;
					min-width: $table-responsive-margin-left-md;
				}
			}
		}

		// Info Bar

		.info-bar-container {
			background-color: #fff;
			border-bottom: 1px solid #edf0f2;
			min-height: 47px;

			.info-bar {
				padding: 0;
			}

			@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
				min-height: 59px;
			}

			.info-bar-default {
				.taglib-workflow-status .workflow-version {
					color: #6b6c7e;
				}

				.btn {
					margin: 7px 0 7px 15px;

					@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
						margin: 13px 0 13px 15px;
					}
				}
			}

			.info-bar-center {
				left: 50%;
				margin-top: 16px;
				position: absolute;
				text-align: center;
				transform: translate(-50%);
				width: 100%;

				@include media-breakpoint-up(sm) {
					margin-top: 20px;
				}
			}

			&.affix {
				min-height: 35px;
				transition: min-height 0.15s ease;

				.info-bar-center {
					margin-top: 5px;
				}
			}
		}
	}

	.portal-popup,
	.cadmin.portal-popup {
		background-color: $cadmin-white;

		.columns-max > .portlet-layout.row {
			margin-left: 0;
			margin-right: 0;

			> .portlet-column {
				padding-left: 0;
				padding-right: 0;
			}
		}

		.portlet-export-import .portlet-body > .cadmin {
			height: inherit;
		}

		.sheet {
			> .lfr-nav {
				margin-top: -24px;
			}
		}

		.contacts-portlet .portlet-configuration-container .form {
			position: static;
		}

		.lfr-form-content {
			padding: 24px 12px;
		}

		.portlet-body,
		.portlet-boundary,
		.portlet-column,
		.portlet-layout {
			height: 100%;
		}

		.portlet-column {
			position: static;
		}

		.dialog-body,
		.export-dialog-tree,
		.lfr-dynamic-uploader,
		.lfr-form-content,
		.portlet-configuration-body-content,
		.process-list,
		.roles-selector-body {
			> .container-fluid-max-xl,
			.container-view {
				padding-top: 20px;

				.nav-tabs-underline {
					margin-left: -$cadmin-grid-gutter-width / 2;
					margin-right: -$cadmin-grid-gutter-width / 2;
					margin-top: -20px;
				}
			}

			> .lfr-nav + .container-fluid-max-xl {
				padding-top: 0;
			}
		}

		.login-container {
			padding: $cadmin-modal-inner-padding;
		}

		.management-bar-default {
			border-left-width: 0;
			border-radius: 0;
			border-right-width: 0;
			border-top-width: 0;
			margin-bottom: 0;
		}

		.navbar ~ .portlet-configuration-setup,
		.portlet-export-import-container {
			height: calc(100% - 48px);
			position: relative;
		}

		.panel-group .panel {
			border-left-width: 0;
			border-radius: 0;
			border-right-width: 0;
		}

		.panel-group .panel + .panel {
			border-top-width: 0;
			margin-top: 0;
		}

		.panel-heading {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		.portlet-configuration-setup {
			.lfr-nav {
				margin-left: auto;
				margin-right: auto;
				max-width: 1280px;
				padding-left: 3px;
				padding-right: 3px;

				@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
					padding-left: 8px;
					padding-right: 8px;
				}
			}
		}

		.lfr-dynamic-uploader,
		.process-list {
			bottom: 0;
			display: block;
			left: 0;
			overflow: auto;
			position: absolute;
			right: 0;
			top: 48px;
			-webkit-overflow-scrolling: touch;
		}

		.portlet-export-import-publish-processes {
			top: 0;
		}

		.dialog-footer {
			background-color: $cadmin-white;
			border-top: $cadmin-modal-footer-border-width solid
				$cadmin-modal-footer-border-color;
			bottom: 0;
			box-shadow: $cadmin-modal-footer-box-shadow;
			display: flex;
			flex-direction: row-reverse;
			left: 0;
			margin: 0;
			padding: 10px 24px;
			width: 100%;
			z-index: $cadmin-zindex-sticky;

			@include media-breakpoint-up(md) {
				position: fixed;
			}

			.btn {
				margin-left: 16px;
				margin-right: 0;
			}

			&.dialog-footer-not-reverse {
				flex-direction: initial;
				justify-content: flex-end;
			}
		}

		.dialog-body,
		.lfr-dynamic-uploader,
		.lfr-form-content,
		.portlet-configuration-body-content,
		.roles-selector-body {
			@include media-breakpoint-up(md, $cadmin-grid-breakpoints) {
				&:not(:last-child) {
					padding-bottom: 60px;
				}
			}
		}

		.lfr-dynamic-uploader {
			display: table;
			table-layout: fixed;
			width: 100%;

			&.hide-dialog-footer {
				bottom: 0;

				+ .dialog-footer {
					display: none;
				}
			}
		}

		.portlet-configuration-edit-permissions {
			.portlet-configuration-body-content {
				display: flex;
				flex-direction: column;
				overflow: visible;

				> form {
					flex-grow: 1;
					max-width: none;
					overflow: auto;
				}
			}
		}

		.portlet-configuration-edit-templates
			.portlet-configuration-body-content {
			bottom: 0;
		}
	}

	.overlay-content .open > .dropdown-menu.cadmin {
		display: block;
		position: static;
	}
}
