/// <reference path="_variables.scss" />
/// <reference path="../../Content/shared/_variables-shared.scss" />
/// <reference path="../../Content/shared/_mixins.scss" />
/// <reference path="../../Content/bs4/scss/bootstrap.scss" />

//
// Legacy BS elements
// --------------------------------------------------

.well {
    background-color: $gray-100;
    padding: 1rem;
	margin-bottom: $alert-margin-bottom;
}

pre {
	background: $gray-100;
	padding: 1rem;
	border: 1px solid rgba(#000, 0.1);

	&.prettyprint {
		padding: 1rem !important;
		border: 1px solid rgba(#000, 0.1) !important;
	}
}

.badge-secondary {
	background-color: $gray-600;
	color: $yiq-text-light;
}


// Typo
// -----------------------------------------------------

.text-light {
	color: $gray-400 !important;
}

.text-primary-darkest {
	color: $sm-violet !important;
}


//
// Buttons:
// btn-(outline-)(secondary|light)
// look really shitty in BS4, style it decently.
// -----------------------------------------------------

.btn-outline-secondary,
.btn-outline-light {
	color: $yiq-text-dark;
	border-color: $input-border-color;

	&:not([disabled]):not(.disabled):hover,
	&:not([disabled]):not(.disabled).hover {
		border-color: darken($input-border-color, 8%);
	}

	&.disabled,
	&[disabled] {
		color: $yiq-text-dark;
		border-color: $input-border-color;
	}

	&:not([disabled]):not(.disabled):active,
	&:not([disabled]):not(.disabled).active,
	.show > &.dropdown-toggle {
		background-color: darken($secondary, 5%);
		border-color: darken($input-border-color, 5%);
	}
}

.btn-outline-secondary {
	color: $yiq-text-dark;
}

.btn-outline-light {
	color: $gray-600;
}



//
// Layout
// -----------------------------------------------------

html {
	height: 100%;
}

body {
	background-color: $gray-200;
	&.popup {
		background-color: #fff;
	}
}

#page { 
	position: relative;
	margin: 0;
	padding: 0;
}

header {
	@include gradient-bg($indigo);
	padding-bottom: 50px;

	.popup & {
		display: none;
	}
}

.cph {
   padding-top: 55px;
}

#content {
	position: relative;
	height: auto;
	margin: 0 15px;
	margin-top: -50px;
	background-color: #fff;
	padding: $content-padding-y ($content-padding-x / 2);
	padding-bottom: $content-padding-x * 2;
	box-shadow: 0 0 6px rgba(0,0,0, 0.2);
	border-top-left-radius: $border-radius;
	border-top-right-radius: $border-radius;

	@include media-breakpoint-up(lg) {
		margin-left: 30px;
		margin-right: 30px;
		padding-left: $content-padding-x;
		padding-right: $content-padding-x;
	}
}

.popup #content {
	margin: 0;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.popup.bare {
	height: 100%;
	overflow-y: hidden;

	#page,
	#content,
	.cph {
		height: 100%;
		padding: 0;
	}
}

.section-title {
	border-bottom: solid 3px $gray-300;
	padding-bottom: 1px;
	margin-bottom: 10px;
	color: #009FFF;
	font-size: 14px;
	font-weight: 700;
	vertical-align: bottom;
}

.section-title img {
	vertical-align: middle;
	padding-bottom: 2px;
}

.section-header {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	padding: 0.75rem ($content-padding-x / 2);
	transition: background-color 0.1s ease-in-out, padding 0.1s ease-in-out;

	@include make-row();
	flex-wrap: nowrap;
	margin-left: 0;
	margin-right: 0;

	.title, .options {
		@include make-col-ready();
	}

	.title {
		font-family: $headings-font-family;
		font-weight: 400;
		color: $headings-color;
		font-size: $h5-font-size;
		line-height: $input-height;
		min-height: $input-height;
		vertical-align: middle;
		@include text-truncate();
		padding-left: 0;
		padding-right: 5px;
		color: $text-muted;
		// mimic .col
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;

		> i {
			font-size: 28px;
			vertical-align: text-top;
			margin-right: 0.5rem;
			color: $text-muted;
		}

		> img {
			max-height: $input-height;
			max-width: 120px;
			margin-right: 5px;
			vertical-align: top;
		}

		a:not(.btn) {
			text-decoration: none;
			font-family: $font-family-sans-serif;
			font-size: 12px;
			font-weight: normal;
		}
	}
	// .title
	.options {
		// mimic .col-auto
		flex: 0 0 auto;
		width: auto;
		max-width: none; // Reset earlier grid tiers
		padding-left: 5px;
		padding-right: 0;

		> * {
			vertical-align: middle;
		}

		&.btn-toolbar {
			margin: 0;
		}

		@media (max-width: 768px) {
			// hide action button labels on small screens
			.btn > span:not(:only-child) {
				display: none;
			}
		}
	}

	&.sticky {
		position: fixed;
		z-index: 600;
		left: $content-padding-x / 2;
		right: $content-padding-x / 2;
		margin-left: 0 !important;
		margin-right: 0 !important;
		background: $gray-100;
		background: #fff;
		border-bottom: 1px solid rgba(0,0,0, 0.08);

		.modal-open & {
			// add the killed scrollbar width
			margin-right: 17px !important;
		}
	}

	@include media-breakpoint-up(lg) {
		padding-left: $content-padding-x;
		padding-right: $content-padding-x;

		&.sticky {
			left: $content-padding-x;
			right: $content-padding-x;
		}
	}
}

.popup .section-header.sticky {
	left: 0;
	right: 0;
	top: 0;
}


//
// Main Menu
// --------------------------------------------------------------

#navbar {
	padding: 0 30px;

	.dropdown-toggle:after {
		display: none;
	}

	.navbar-brand > .navbar-img {
		// Edge cannot auto-scale SVGs. We need to provide both width and height.
		height: 28px;
		width: 33px;

		@include media-breakpoint-up(lg) {
			height: 28px;
			width: 160px;
		}
	}

	.dropdown-menu {
		margin-top: -2px;
		opacity: 0;
		transform: translateY(-10px);
		display: block;
		visibility: hidden;
		transition: opacity 0.28s ease, transform 0.28s ease-out;

		&.show {
			visibility: visible;
			transform: translateY(0);
			opacity: 1;
		}
	}

	#navbar-menu .nav-item > .dropdown-menu {
		@include bubble("top", "near", 8, #fff, $dropdown-border-color, 10px);
	}

	.dropdown-item > i,
	.dropdown-item > img {
		display: inline-block;
		font-size: inherit;
	}

	.dropdown-header {
		font-size: $font-size-xs;
		text-transform: uppercase;
	}

	.nav-item {
		.nav-link {
			max-width: 100px;
			padding: 14px 8px !important;
			text-align: center;
			color: #fff;
			background: rgba(#fff, 0);
			opacity: 0.8;
			transition: opacity 0.1s linear, background-color 0.1s linear;
		}

		.nav-link:hover,
		&.show .nav-link {
			background: rgba(#fff, .15);
			opacity: 1;
		}

		.navbar-icon {
			position: relative;
			text-align: center;
			vertical-align: middle;
			font-size: 20px;
			height: 22px;
			line-height: 22px;
			color: #fff;
		}

		.navbar-label {
			@include text-truncate();
			text-align: center;
			font-size: 11px;
			padding: 0;
			padding-top: 0.25rem;
		}

		.navbar-tool {
			padding-left: 0.625rem !important;
			padding-right: 0.625rem !important;
			height: 72px;
			display: flex;

			> * {
				align-self: center;
			}
		}
	}

	.reddot {
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: $red;
		color: #fff;
	}
}



//
// Forms
// --------------------------------------------------

legend {
	font-family: $headings-font-family;
	font-weight: $headings-font-weight;
	font-size: 1.25rem;
}

.col-form-label {
	font-weight: $font-weight-medium;
}

.ctl-label {
	position: relative;
	padding-right: 2.5rem;
	display: inline-block;

	> label {
		position: relative;
		padding-right: 0;
		margin-bottom: 0.4rem;
		font-weight: $font-weight-medium;
	}

	> .hint {
		$hintColor: $gray-600;
		display: block;
		position: absolute;
		cursor: default;
		width: 2.5rem;
		right: 0;
		top: 0;
		text-decoration: none;
		outline: 0;
		color: $hintColor;
		transition: all .1s ease-in-out;
		opacity: 0;
		text-align: center;
		/*@extend .col-form-label;*/

		&:hover {
			color: $gray-600;
		}

		> i {
			font-size: 1.25rem;
		}
	}

	&:hover > .hint {
		opacity: 1;
	}
}


//
// Multi-store settings
// --------------------------------------------------

.multi-store-setting-control > input[type=checkbox] {
	position: relative;
	margin: 0;
	margin-top: $input-padding-y;
}


//
// AJAX Busy
// --------------------------------------------------

@keyframes loading {
    from {left: 50%; width: 0; z-index:100;}
    50% {left: 0; width: 100%; z-index: 10;}
    to {left: 0; width: 100%;}
}

@keyframes loadingbar {
	from {left: -200px; width: 30%;}
	50% {width: 30%;}
	70% {width: 70%;}
	80% { left: 50%;}
	95% {left: 120%;}
	to {left: 100%;}
}

#ajax-busy {
	position: fixed;
	opacity: 0;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 3px;
	z-index: 999;
	background-color: #ffab40;
	transition: opacity .05s ease-in;

	&.busy {
		opacity: 1;
	}

	&.busy > .bar {
		content: "";
		display: inline;
		position: absolute;
		width: 0;
		height: 100%;
		left: 50%;
		text-align: center;
		animation: loading 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
	}
	> .bar:nth-child(1) {
		background-color: #fff;
	}
	> .bar:nth-child(2) {
		background-color: #3F51B5;
		animation-delay: 0.5s;
	}
	> .bar:nth-child(3) {
		background-color: #ffab40;
		animation-delay: 1s;
	}
}

.loading-bar {
	height: 4px;
	width: 100%;
	position: relative;
	overflow: hidden;
	background-color: #ddd;
	
	&:before {
		display: block;
		position: absolute;
		content: "";
		left: -200px;
		width: 200px;
		height: 4px;
		background-color: #2980b9;
		animation: loadingbar 2s linear infinite;
	}
}


//
// Apply grid layout to editor tables (.adminContent)
// --------------------------------------------------

.adminData {
    select, 
    input, 
    textarea,
    .uneditable-input,
    .input-append,
    .input-prepend {
        margin-bottom: 0 !important;
    }
}

.adminContent {
	display: block;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-left: 0;
	padding-right: 0;
	border-collapse: initial;

	> tbody {
		display: flex;
		flex-flow: column;
		border-collapse: initial;
	}

	> tbody > tr,
	> tr,
	.adminRow {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0.4rem;
		margin-bottom: 0.4rem;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	div.adminRow {
		// div type rows do margin collapse, fix it.
		margin-top: 0.8rem;
		margin-bottom: 0.8rem;
	}

	.adminTitle,
	.adminData {
		@include make-col-ready();
		padding-right: 0;
		padding-left: 0;
		display: block;
	}

	.adminTitle {
		margin-bottom: 0;
	}

	.adminData {
		> .switch,
		.multi-store-setting-control > .switch {
			padding-top: calc(#{$input-padding-y} + #{$input-border-width});
			padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
		}

		> .switch {
			margin-bottom: 0;
			line-height: $input-line-height;
		}
	}

	> tbody > tr > td:only-child:not(.adminData):not(.adminTitle),
	> tr > td:only-child:not(.adminData):not(.adminTitle) {
		flex-grow: 1;
		max-width: 100%;
	}

	&.adminContent-boxed {
		.adminTitle, .adminData {
			padding-left: $grid-gutter-width / 2;
			padding-right: $grid-gutter-width / 2;
		}
	}

	&:not(.adminContent-vertical) > tbody > tr:not(.wide),
	&:not(.adminContent-vertical) > tr:not(.wide),
	&:not(.adminContent-vertical) .adminRow:not(.wide) {
		@include media-breakpoint-up(md) {
			flex-wrap: nowrap;

			> .adminTitle {
				flex: 0 0 33.333333%;
				max-width: 33.333333%;
				text-align: right;
				padding-right: 0 !important;

				.ctl-label > label,
				.ctl-label > .hint {
					// actually is '.col-form-label', @extend is not possible here.
					font-size: inherit;
					line-height: $input-line-height;
					padding-top: calc(#{$input-padding-y} + #{$input-border-width});
					padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
					margin-bottom: 0;
				}
			}

			> .adminData {
				flex: 0 0 66.666667%;
				max-width: 66.666667%;
				padding-left: 0 !important;

				&:not(.wide) {
					padding-right: 0 !important;
				}
			}
		}

		@include media-breakpoint-up(lg) {
			> .adminTitle {
				flex-basis: 400px;
				max-width: 40%;
			}

			> .adminData {
				flex-basis: 600px;
				max-width: 60%;

				&.wide {
					flex-grow: 1;
					flex-basis: 0;
					max-width: 100%;
				}
			}
		}
	}
}

.adminSeparator {
	width: 100%;
}

.ie11 {
	.adminContent,
	.adminTitle,
	.adminData {
		display: table;
	}
	.adminTitle {
		width: 25%;
	}
}

//
// Tables
// --------------------------------------------------

.admin-table {
	$tbcolor: darken($table-border-color, 5%);
	border: 1px solid $tbcolor;

	thead {
		background-color: $table-head-bg;
	}

	thead th {
		line-height: 1.75rem;
		border-bottom-width: 1px;
		border-top-color: $tbcolor;
	}

	td, th {
		vertical-align: middle;
	}

	.disabled {
		color: $text-muted;
	}

	.progress-info {
		min-width: 260px;
	}

	select, input {
		margin-bottom: 0;
	}
}

// Handle action button toggling in tables & grids

.table tbody,
.t-grid > table tbody,
.t-grid > form > table tbody {
	.t-last {
		@include text-truncate();
	}

	.omega {
		text-align: right;
	}

	tr:not(.t-grid-edit-row):not(.active-row) {
		> .t-last,
		> .omega {
			.t-button, .btn {
				visibility: hidden;
			}
		}

		&:hover > .t-last,
		&:hover > .omega {
			.t-button, .btn {
				visibility: visible;
			}
		}
	}
}


//
// Locale Editor
// --------------------------------------------------

.locale-editor {
	$border-color: $card-border-color;

	background-color: #fff;
	border: 1px solid $border-color;
	margin-bottom: 1rem;
	border-radius: $border-radius;

	.nav-locales > .nav {
		padding: 0.25rem 0.25rem 0 0.25rem;
		border-bottom-color: $border-color;
		background-color: $card-cap-bg;
		border-top-left-radius: $border-radius;
		border-top-right-radius: $border-radius;

		.nav-link {
			color: #777;
			font-weight: 600;
			padding-top: 0.75rem;
			padding-bottom: 0.75rem;

			> img {
				opacity: 0.8;
			}
		}

		.nav-link:hover,
		.nav-link.active {
			color: inherit;
			border-color: transparent;

			> img {
				opacity: 1;
			}
		}

		.nav-link.active {
			background-color: #fff;
			border-color: $border-color;
			border-bottom-color: #fff;
		}
	}

	> .nav-locales > .tab-content > .tab-pane > .adminContent {
		@extend .adminContent-boxed;
	}
}

.locale-editor-content[data-rtl="true"] {
	input,
	textarea,
	select,
	.locale-editor-control,
	.note-editable,
	.note-editor-preview:not(.empty) {
		direction: rtl;
		text-align: right;
	}
}


//
// Thumb Zoomer
// --------------------------------------------------

.zoomable-thumb-container {
	width: 50px;
	height: 32px;
	line-height: 32px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;

	> img {
		max-height: 100%;
		max-width: 100%;
	}
}

.zoomable-thumb {
	max-width: 50px;
	max-height: 32px;
}

.zoomable-thumb-clone {
	border: 1px solid #bbb;
	background-color: #fff;
	z-index: 100;
}


//
// Adapt class-less form elements to bs4
// --------------------------------------------------

input[type=text]:not([class*="form-control"]),
input[type=password]:not([class*="form-control"]),
input[type=email]:not([class*="form-control"]),
input[type=number]:not([class*="form-control"]),
input[type=tel]:not([class*="form-control"]),
.t-numerictextbox > .t-input,
select:not([class*="form-control"]),
textarea:not([class*="form-control"]) {
	@extend .form-control;
}

// Reset BS' check/radio positioning in adminData-columns
.adminData > .form-check-input {
	position: relative;
	margin-left: 0;
}


//
// admin-config-group
// --------------------------------------------------

.admin-config-group {
	display: block;
	width: 100%;

	.title,
	.small-title,
	.head {
		font-family: $headings-font-family;
		font-weight: $headings-font-weight;
		color: inherit; 
		border-bottom: 1px solid $gray-300;
	}
	.sub-title {
		font-family: $font-family-base;
		font-size: $font-size-base;
		font-weight: 100;
	}
	.title,
	.head {
		font-size: $h5-font-size;
		padding: 12px 0;
	}
	.head {
		margin-bottom: 12px;
	}
	.title {
		margin: 12px 0;
	}
	.small-title {
		margin: 2px 0;
		padding: 2px 0;
	}
}


//
// Themes
// --------------------------------------------------

#theme-list {
	.theme-thumbnail {
		height: 220px;
		background-size: cover;
		background-repeat: no-repeat;
		border-bottom: 1px solid rgba(#000, 0.1);
	}

	.theme-broken-badge {
		position: absolute;
		background-color: $danger;
		color: #fff;
		right: 0;
		bottom: 0;
		padding: 0.25rem 0.75rem;
		font-size: 1rem;
	}
}

.theme-editor {
	.themevar-chain-info {
		color: $gray-600;
		margin-left: 0.75rem;
		white-space: nowrap;
	}
}


//
// Datetimepicker
// --------------------------------------------------

.datetimepicker-group {
	.input-group-text {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: $input-height;

		> i {
			width: 100%;
		}
	}

	&.input-group-sm .input-group-text {
		width: $input-height-sm;
	}

	&.input-group-lg .input-group-text {
		width: $input-height-lg;
	}
}


//
// Dashboard
// --------------------------------------------------

.stats-today {
	.stats-today-item {
		padding: 0 1.5rem;
		text-align: left;
		border-right: 1px solid $gray-300;

		&:last-child {
			padding-right: $grid-gutter-width/2;
			border-right: none
		}
	}

	.stats-today-item-label {
		font-weight: 400;
		font-size: $font-size-xs;
		margin-bottom: 0.75rem;
		color: $gray-600;
	}

	.stats-today-item-value {
		font-size: 2rem;
		//font-weight: 600;
		line-height: 2rem;
		color: $gray-500;

		&.active {
			color: $gray-700;
		}
	}

	.stats-today-title {
		line-height: 1;
	}
}

.marketplace-feed {
	.marketplace-feed-title {
		text-transform: uppercase;
		font-size: 18px;
		margin-bottom: 30px;

		i {
			font-size: 20px;
		}
	}

	.marketplace-feed-item {
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #ddd;

		&:last-child {
			border-bottom: none;
		}
	}

	.marketplace-feed-item-title {
		margin-bottom: 4px;
	}
}


// Plugins & Providers
// --------------------------------------------------------------

.sortable-grip {
	left: 0;
	width: 9px;
	z-index: 1000;
}

.module-list {
	margin-bottom: 2rem;
	margin-left: -$content-padding-x;
	margin-right: -$content-padding-x;
}

.module-list, 
.module-item {
	position: relative;
}

.module-list > h3 {
	color: $text-muted;
	font-size: $h5-font-size;
	margin-bottom: 1rem;
	padding: 0 $content-padding-x;
}

.module-item {
	display: flex;
	flex-wrap: wrap;
	padding: 1rem 0;
	border-top: 1px solid rgba(#000, 0.1);
}

.module-item.inactive {
	background-color: $gray-100;
}

.module-item.inactive .module-icon {
	opacity: 0.5;
}

.module-icon {
	width: 93px;
	text-align: center;
	flex: 0 0 auto;
	max-width: none;
	padding: 15px;
	padding-left: $content-padding-x;

	.icon, i {
		max-width: 48px;
	}
}

.module-data {
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
	padding: 0 15px;
}

.module-item:last-child .module-data {
	border-bottom: none;
}

.module-heading {
	display: flex;
	flex-wrap: nowrap;
}

.module-title {
	display: flex;
	flex-wrap: nowrap;
}

.module-name {
	font-weight: $font-weight-medium;
	font-size: $font-size-lg;
}

.module-badges {
	margin-left: 0.4rem;
}

.module-info {
	margin-top: 0.2rem;
	font-size: $font-size-sm;
}

.module-actions {
	margin-left: auto;
	transition: opacity 0.1s ease-in-out;

	&:not(.show) {
		opacity: 0;
	}

	.module-item:hover & {
		opacity: 1;
	}
}

.module-info .attr:after {
	display: inline-block;
	content: '\00b7';
	padding: 0 5px;
}

.module-info .attr:last-child:after {
	display: none;
}

.module-info .attr-value {
	display: inline-block;
	color: $text-muted;
	padding-left: 0.15rem
}

.module-description {
	margin-bottom: 0.25rem;
	color: $gray-600;
}

table.payment-method-features td {
	padding: 2px 4px;
	font-size: $font-size-sm;
}


//
// Plugin configuration
// --------------------------------------------------

.section-header .options .plugin-actions {
	display: inline-block;
}

.plugin-config-container .plugin-actions {
	display: none;
}

.plugin-configuration {
	display: flex;
	flex-wrap: nowrap;
	margin-top: 1rem;

	> div:first-child {
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;
	}
	> div:last-child {
		flex: 0 0 auto;
		width: auto;
		max-width: 300px;
		padding-left: 2rem;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}


// Special icons
// --------------------------------------------------------------

.icon-active-true {
	color: $green;
	text-shadow: 0 -1px 0 #fff;
	&::before { content: '\f00c'; }
}

.icon-active-false {
	color: $gray-400;
	text-shadow: 0 -1px 0 #fff;
	&::before { content: '\f068'; }
}


// Attributes
// --------------------------------------------------------------


#order-form .checkout-attributes {
	table {
		//margin-left: auto
	}
	.attr-caption {
		font-weight: $font-weight-medium;
		text-align: right;
		padding-right: 10px;
		&:after {
			content: ': ' 
		}
	}
	.attr-value {
		text-align: left;
	}
}

/* Table formatted variant attributes */
.product-attribute-table {
	.column-name {
		min-width: 80px;
		padding: 2px 10px 2px 0;
		vertical-align: top;
		font-weight: $font-weight-medium;
	}

	.column-value {
		padding: 2px 0 2px 0;
		vertical-align: top;
	}
}



// Warning panel message
// --------------------------------------------------------------

.warning-panel-message {
	$bgColor: darken($primary, 15%);
	z-index: 1031;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 10px 20px;
    @include gradient-y($bgColor, darken($bgColor, 12%));
	color: #fff;
	text-shadow: 0px 1px 0px mix(#000, $bgColor, 30%);
	border-top: 1px solid darken($bgColor, 10%);
	text-align: center;
	a {
		color: inherit;
		text-decoration: underline;
	}

	.popup & {
		display: none !important;
	}
}


//
// Import column mapping
// --------------------------------------------------------------

@media (max-width: 1280px) {
	#ImportColumnMappings .right-label,
	.column-mapping .mapping-button-label,
	.mapping-list-item .right-label {
		display: none;
	}
}

.column-mapping .right-label,
.mapping-list-item .right-label {
	font-size: 0.9em;
	padding-top: 2px;
	align-self: flex-end;
}
.mapping-list-item {
	@include text-truncate();
	display: flex;
	flex-wrap: nowrap;
}

.column-mapping {
	.column-one, 
	.column-two {
		width: 42%;
	}

	.select2-container .select2-choice span {
		margin-right: 12px;
		white-space: nowrap;
	}

	.mapping-edit {
		white-space: nowrap;

		.select-column, 
		.select-property {
			width: 84%;
		}
	}

	.mapping-item {
		.item-inner {
			white-space: nowrap;
			cursor: pointer;
			padding: 7px 0;
			display: flex;
			flex-wrap: nowrap;
		}

		.select2-selection__clear {
			margin-left: 3px;
		}
	}
}


//
// Misc
// --------------------------------------------------------------

.color-container {
	display: inline-block;
	background-color: transparent;
	padding-right: 0.5rem;
	line-height: 1;

	.color {
		width: $font-size-base;
		height: $font-size-base;
		vertical-align: bottom;
		display: inline-block;
		border: 1px solid #646464;
	}
}


//
// HTML editors
// --------------------------------------------------------------

.cke_chrome.cke_focus {
    border-color: $input-focus-border-color;
    box-shadow: none;
}

.note-editor-preview {
	border: 1px solid $input-border-color;
	min-height: 100px;
	max-height: 350px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: $input-padding-y $input-padding-x;
	cursor: default;

	&.empty {
		min-height: initial;
		//color: $text-muted;
	}
}

.note-editor {
	border-color: $input-border-color !important;
	border-radius: $input-border-radius !important;

	&.focus {
		border-color: $input-focus-border-color !important;
	}

	.note-toolbar {
		display: flex;
		flex-wrap: wrap;

		> .note-btn-group {
			border: 0 solid rgba(#000, 0.12);
			border-right-width: 1px;
			padding-right: 5px;
		}

		> .note-btn-group:last-of-type {
			border-right-width: 0;
			padding-right: 0;
			//margin-left: auto !important;
		}

		.dropdown-toggle:after {
			margin-left: 0.5em;
			opacity: 0.6;
		}

		.dropdown-toggle:empty:after {
			margin-left: 0;
		}

		.note-para > .btn-group:last-child .dropdown-menu.show {
			// Fix: the para popover button groups should not wrap
			display: flex !important;
		}

		.dropdown-style > .dropdown-item > * {
			// Fix: Summernote does not remove the BS4 bottom margin of para style dropdown items
			margin-bottom: 0;
		}

		.note-color + .btn-group > .btn {
			// Fix: the fontsize button width should not change (toolbar flickers)
			padding-left: 0.5rem;
			padding-right: 0.5rem;
			min-width: 50px;
		}

		.scrollable-menu {
			height: auto;
			max-height: 340px;
			width: 360px;
			overflow-x: hidden;
			padding: 0 !important
		}

		.btn-group-cssclass .dropdown-menu {
			&.show {
				display: flex;
				flex-direction: column;
			}

			.dropdown-item {
				position: relative;

				&.checked {
					order: -1;

					&:before {
						position: absolute;
						content: '';
						left: 0;
						top: 0;
						bottom: 0;
						width: 3px;
						background-color: $warning;
					}
				}
			}
		}
	}

	.note-editable {
		table:not(.table-bordered):not([border]),
		table:not(.table-bordered)[border='0'] {
			border-collapse: collapse;

			td, th {
				border: 1px dashed #bbb;
			}
		}
	}
}