.chimeraField-entry {
	display: block;

	&.action-edit {
		margin-bottom: 0.5rem;
	}
}

.action-save.btn {
	.btn-success();
}

.action-remove.btn {
	.btn-danger();
}

.flex-row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	align-items: stretch;
}

.flex-col {
	-webkit-flex: 0 auto;
	flex: 0 auto;
}

.panel-heading {
	display: flex;
	align-items: center;

	> * {
		flex: auto;
	}
}

.chimeraEditor-actions {
	flex: 1 1 auto;
}

.chimera-panel-title {
	flex: 0 1 auto;
}

.chimeraField-prefix-selector {
	margin-left: 0.5rem;
}

.chimeraField-wysiwyg {
	background-color: @gray-dark;
	border-color: @gray-dark;
	box-shadow: none;
	color: @gray-ui;
	outline: none;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	border-radius: 4px;
	margin-left: 0.6rem;

	&::-moz-placeholder           { color: @gray-ui; }
	&:-ms-input-placeholder       { color: @gray-ui; }
	&::-webkit-input-placeholder  { color: @gray-ui; }

	&:focus {
		border-color: @gray-dark;
		box-shadow: inset 0 0px 3px @gray-ui;
	}
}

.chimeraField-label {
	display: block;
}

.chimeraField-entry {
	padding-left: 9px;
}

.chimeraMedia-progress.progress {
	margin-bottom: 0;
}

.mediafilechooser {
	padding-left: 9px;
}

.chimeraEditor-subschema {
	margin-left: -5px;

	.chimeraEditor-subschema-fields {
		margin-bottom: 2rem;
		border-left: 2px solid rgba(255, 255, 255, 0.4);
		margin-left: -5px;
	}
}

.chimeraField-entry:nth-child(even) .chimeraEditor-subschema-fields {
	background-color: @gray-back;
}

// Add a clear border to a subschema field (when it's not the last field)
.chimeraEditor-subschema:not(:last-child) {
	border-bottom: 3px solid #30363c;
}

// Stuff that needs fixing, so it should be hidden for now
.main-title {
	padding-right: 0 !important;
	margin-right: 0 !important;
}

.main-filter {
	display: none;
}

.btn i x-svg {
	height: 100%;
}

.btn x-svg {
	display: inline-flex;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	margin-right: .1rem;
	vertical-align: middle;
}

// Temporary fixes
.quickmenu {
	display: none;
}

.hide-translate-buttons {
	.chimeraField-prefix-buttons {
		display: none;
	}
}

.vex.vex-theme-bottom-right-corner .vex-content {
	background: #e9e9e9;
	box-shadow: -1px -1px 1px rgba(0,0,0,0.1);
}

.vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-dialog-button-primary {
	background-color: #fff;
	border-color: #e9e9e9;
	color: #5e6870;
}

// We added this, but this causes menus to add scrollbars and such...
// .datalist .panel-body {
// 	overflow: auto;
// }

.datatable tr.filter-row input.form-control {
	// This stops making the filter inputs widen small fields
	width: 100%;
}

.sortable-row.draggable-mirror {
	box-shadow: 0px 0px 4px @gray-dark;
	outline: 1px solid rgba(200,200,200,0.5);

	td {
		background-color: @gray-pad !important;
	}

	.chimera-actions-wrapper {
		display: none;
	}
}

.drag-handle {
	cursor: grab;
	text-align: center;
	opacity: 0.3;
}

.drag-handle:hover {
	opacity: 1;
}

.panel-body .table {
	tr td,
	tr th {
		vertical-align: middle;
	}
}

.chimeraField-entry {
	// Fallback for non-form-control inputs being too light
	input:not(.form-control) {
		color: #444;
	}
}

.chimeraField-left.control-label {
	display: flex;
	margin-bottom: 1rem;

	label {
		padding-left: 9px;
		margin-bottom: 0 !important;
		margin-right: 1rem;
	}

	> * {
		align-self: center;
	}
}

.chimeraField-label,
.chimeraEditor-fieldLabel {
	text-align: left;

	.field-title {
		font-size: 1.8rem;
		color: #aaa;
	}

	.field-description {
		display: block;
		color: #ababab;
	}
}

.chimeraField-wysiwyg {
	min-height: 100px;
}

ul.group-size-1 {
	display: none;
}

.breadcrumb > li.crumb-opener + li::before {
	content: '';
	display: none;
}

.breadcrumb > li:not(.crumb-opener) + li::before {
	content: "→";
}

[data-sort-order="asc"][data-sort-active="true"],
[data-sort-order="desc"][data-sort-active="true"] {
	color: @blue-light;

	&:after {
		display: inline-block;
		width: 0;
		height: 0;
		content: "";
		margin-right: -10px;
		margin-bottom: 2px;
		margin-left: 5px;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
	}
}

[data-sort-order="asc"] {
	&:after {
		border-top: 4px solid @blue-light;
	}
}

[data-sort-order="desc"] {
	&:after {
		border-bottom: 4px solid @blue-light;
	}
}

input::placeholder {
	color: @gray-pad !important;
}

.chimera-actions-wrapper {
	min-width: 9rem;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
	line-height: initial;
}

.nav-menu__text .fas {
	min-width: 2rem;
}

[data-type="dialog"] {
	min-width: 50vw;
	padding: 2rem;

	// Make sure it's opaque
	background-color: fadein(@gray-dark, 100%);
}

@supports (backdrop-filter: blur(20px)) {
	.js-he-dialog-wrapper {
		backdrop-filter: blur(4px);
	}
}

// Hide useless ckeditor image fields
#cke_182_uiElement,
#cke_185_uiElement {
	display: none;
}

.chimeraField-entry textarea.cke_source {
	border-color: rgba(100,100,100,0.5);
	color: #eeee;
	background-color: #2A2E31;
	padding: 1rem;
}

.chimeraEditor-boolean {
	position: relative;
	display: flex;
	align-items: center;

	input {
		opacity: 0;
		position: absolute;
		top: 0; left: 0;
	}

	input:checked ~.chimeraEditor-boolean-text {
		background-color: #20c05b;

		&:before {
			content: attr(data-unchecked);
			left: 0;
		}

		&:after {
			content: attr(data-checked);
			transform: translate3d(65px, 0, 0);
			font-weight: bold;
		}
	}

	input[disabled] ~.chimeraEditor-boolean-text {
		pointer-events: none;
		opacity: 0.4;
	}

	.chimeraEditor-boolean-text {
		height: 36px;
		flex: 0 0 134px;
		border-radius: 4px;

		transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
		background: #848484;
		position: relative;

		&:before,
		&:after {
			text-transform: uppercase;
			text-align: center;
		}

		&:before {
			content: attr(data-checked);
			left: 67px;
			font-size: 12px;
			line-height: 36px;
			width: 67px;
			padding: 0 12px;
			color: rgba(255, 255, 255, 0.5);

			position: absolute;
			top: 0;
			

			transform: translate3d(0,0,0);
			transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
		}

		&:after {
			content: attr(data-unchecked);
			top: 2px;
			left: 2px;
			border-radius: 2px;
			width: 65px;
			line-height: 32px;
			font-size: 12px;
			font-weight: bold;

			transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
			color: #777;

			position: absolute;
			z-index: 5;

			background: white;
			transform: translate3d(0, 0, 0);
		}
	}
}