<commit_before>/*
 * coffeescript-ui - Coffeescript User Interface System (CUI)
 * Copyright (c) 2013 - 2016 Programmfabrik GmbH
 * MIT Licence
 * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
*/

@import '../../icons/_svg-dimensions.scss';
@import url($font_awesome_url);

// reset

table {
	border-collapse: collapse;
}

td {
	vertical-align: top;
	padding: 0;
	margin: 0;
}

ul {
	margin: 0;
	padding-left: 16px;
}

a {
	text-decoration: none;
	color: black;
}

.italic {
	font-style: italic;
}

// basics

html {
	overflow: hidden;
  width: 100%;
  height: 100%;
}

label {
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	font-size: 13px;
	line-height: normal;
	background: $background;
	display: flex;
	width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

input,
textarea {
	-webkit-appearance: none;
	        appearance: none;
	width: 100%;
	min-width: 100px;
	font-size: 12px;
	border: 1px solid $input-border;
	border-top-color: darken($input-border, 3%);
	border-radius: $input-radius;
	background: $foreground;
	font-family: inherit;
	padding: 2px 3px;
	margin: 0;
	flex: 1 1 auto;
	box-sizing: border-box;
	resize: vertical;
	
	&.cui-input-shadow {
		position: absolute;
		display: block;
		padding: 0;
		border: none;
		top: -1000px;
		left: -1000px;
	}
}

[data-max-chars] {
	box-sizing: content-box;
	text-align: center;
}

// enlarge max-chars < 10
// e.g. max-chars 5 = 5.5ch
@for $i from 1 through 10 {
	[data-max-chars="#{$i}"] {
		width: #{$i + 0.5}ch;
	}
}

// damp max-chars > 10
// e.g. max-chars 30 = 26ch
@for $i from 10 through 40 {
	[data-max-chars="#{$i}"] {
		width: #{$i*(1 - ($i - 10)/30*0.15)}ch;
	}
}

.cui-browser-ie:not(.cui-browser-edge) {
	@for $i from 1 through 10 {
		[data-max-chars="#{$i}"] {
			width: #{$i + 1.5}ch;
		}
	}

	@for $i from 10 through 40 {
		[data-max-chars="#{$i}"] {
			width: #{$i*(1.54 - ($i - 10)/30*0.15)}ch;
		}
	}
}

input[data-max-chars] {
	min-width: 0;
}

body[data-cursor="grabbing"] * {
	cursor: -webkit-grabbing !important;
	cursor: grabbing !important;
}

$drag-cursors: "default", "move", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize";

@for $i from 1 to length($drag-cursors) {
	$cursor: nth($drag-cursors, $i);

	body[data-cursor="#{$cursor}"] * {
		cursor: $cursor !important;
	}
}

* {
	box-sizing: border-box;
}

li > div {
	display: inline-flex;
}

.cui-root-layout {
	overflow: hidden;
}

// HorizontalLayout
.cui-horizontal-layout {
	display: flex;
	flex-shrink: 0;
	
	&.cui-maximize-horizontal {
		flex-direction: row;
		overflow: auto;

		> .cui-horizontal-layout-left {
			position: relative;
			overflow: auto;
		}
		> .cui-horizontal-layout-center {
			position: relative;
			flex: 1 1 0%;
			min-width: 0;
			overflow: auto;
		}
		> .cui-horizontal-layout-right {
			overflow: auto;
		}
	}

	&.cui-maximize-vertical {
		flex: 1 1 auto;
		max-width: 100%;
		min-height: 0;
	}

	&:not(.cui-maximize-horizontal) {
		flex-direction: row;
	}
}

.cui-horizontal-layout-left,
.cui-horizontal-layout-center,
.cui-horizontal-layout-right {
	display: flex;
	flex-direction: column;
	
	> .cui-label {
		padding: 0 $padding;
		
		& + .cui-label {
			padding-left: 0;
		}
	}
}


// VerticalLayout
.cui-vertical-layout {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: hidden;
	
	&.cui-maximize-vertical {
		flex: 1 1 auto;
		min-height: 0;
		max-height: 100%; // used in cui-pane-fill-screen

		> .cui-vertical-layout-top,
		> .cui-vertical-layout-bottom {
			position: relative;
			flex-shrink: 0;
			overflow: hidden;
		}

		> .cui-vertical-layout-center {
			position: relative;
			flex: 1 1 auto;
			min-height: 0;
			overflow: auto;
		}
	}

	&.cui-absolute {
		position: relative;
		width: 100%;
		height: 100%;

		& > div {
			position: absolute !important; // overwrite "relative" from above
			left: 0;
			right: 0;
			width: 100%;
		}

		& > .cui-vertical-layout-top {
			top: 0;
		}

		& > .cui-vertical-layout-center {
			top: 0; // overwritten by Layout.coffee
			bottom: 0; // overwritten by Layout.coffee
		}

		& > .cui-vertical-layout-bottom {
			bottom: 0;
		}
	}
}

.cui-vertical-layout-top,
.cui-vertical-layout-center,
.cui-vertical-layout-bottom {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	
	> .cui-sticky-header {
		flex-basis: auto;
	}
}

// Layout Absolute Horizontal
.cui-horizontal-layout.cui-absolute {
  position: relative;

  width: 100%;
  height: 100%;

  & > div {
		position: absolute !important; // overwrite "relative" from above
    top: 0;
    bottom: 0;
  }
  & > .cui-horizontal-layout-left {
    left: 0;
  }
  & > .cui-horizontal-layout-center {
    left: 0;  // overwritten by Layout.coffee
    right: 0;  // overwritten by Layout.coffee
  }

  & > .cui-horizontal-layout-right {
    right: 0;
  }
}


// Flexhandle

.cui-flex-handle-hidden {
	display: none;
}

.cui-flex-handle {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	-webkit-user-select: none;
	        user-select: none;

	&.cui-flex-handle-has-label:not(.cui-flex-handle-closed) {
		.cui-label {
			display: none;
		}
	}
}

.cui-flex-handle-row {
	width: 10px;
	margin: 0 -5px;
	
	&:not(.cui-flex-handle-closed) {
		cursor: ew-resize;
	}
	&.cui-flex-handle-closed {
		cursor: pointer;
	}
	&.cui-flex-handle-manual-size {
		// background-color: #64fdd8;
	}
	&.cui-flex-handle-has-label.cui-flex-handle-closed {
		width: 32px;
		margin: 0;
		background: white;
		
		.cui-label.cui-tmpl-label-rotate-90 {
			font-size: 14px;
			margin: 11px 0;
			margin-left: -2px;
			
			.cui-label-transform {
				transform: rotate(-90deg) translateY(150%);
				transform-origin: left bottom;
			}
		}
	}
}

.cui-flex-handle-column {
	height: 10px;
	margin: -5px 0;
	width: 100%;
	
	&.cui-flex-handle-has-label.cui-flex-handle-closed {
		margin: 0;
	}

	&:not(.cui-flex-handle-closed) {
		cursor: ns-resize;
	}

	&.cui-flex-handle-closed {
		cursor: pointer;
	}
}


.cui-flex-handle-stretched {
	flex: 1 1 auto !important;
}

.cui-flex-handle-hide-for-stretch {
	display: none;
}

.cui-is-manually-sized {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	
	& + .cui-flex-handle + * {
		flex-shrink: 1 !important;
	}
}


.cui-tmpl-pane-fill-screen {
  transition: top ease-out 0.5s,right ease-out 0.5s,left ease-out 0.5s,bottom ease-out 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

	// Pane Fillscreen
	.cui-pane-fill-screen {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
		
		.cui-pane-fill-screen-inner {
			width: 100%;
			height: 100%;
		}
	}

	// overwrite "style" set by code
  &.cui-pane-fill-screen-is-on {
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

// BorderLayout

.cui-border-layout-north,
.cui-border-layout-south,
.cui-border-layout-west,
.cui-border-layout-east {
	&:empty {
		display: none;
	}
}

// Toolbar
.cui-toolbar {
	display: flex;
	min-height: $toolbar-height;
	justify-content: space-between;
	background: $toolbar-background;
	// needed in listview, to align all: content-box for all!
	box-sizing: content-box;
	overflow: visible !important;

	& + & {
		padding-bottom: 1px;
		
		&:last-child {
			padding-bottom: 0;
		}
	}
	
	&.cui-pane-toolbar {
		border-bottom: 1px solid $border;
	}
	
	> .cui-horizontal-layout-left,
	> .cui-horizontal-layout-right {
		flex-direction: row;
		min-width: 0;
		overflow: visible !important;
	}

	.cui-horizontal-layout-center {
		flex-direction: row;
	}

	> div {
		&.cui-horizontal-layout-center {
			justify-content: center;
			overflow: visible !important;
		}

		> .cui-maximize-horizontal {
			// in column direction this is solved by
			// align-items: stretch, but here
			// we need to overwrite this
			flex: 1 1 auto;
			align-self: stretch;
			overflow: visible;

			> .cui-horizontal-layout-left,
			> .cui-horizontal-layout-center,
			> .cui-horizontal-layout-right {
				overflow: visible;
			}
		}
	}

	.cui-horizontal-layout-left {
		> .cui-label {
			// reset padding: 0 $padding; in cui-horizontal-layout-left
			&:first-child {
				padding-left: $padding/2 + 3px;
			}
			
			&:last-child {
				padding-right: 0;
			}
		}
	}

	.cui-horizontal-layout-right {
		margin-left: $gap;
		flex-shrink: 0;
		
		&:empty {
			margin-left: 0;
		}
	}

	&.cui-template-empty {
		display: none;
	}

	.cui-data-field-input {
		display: flex;
		align-items: center;
		min-width: 0;
		
		&.cui-vertical-layout {
			align-items: stretch;
			justify-content: center;
		}
		
		.cui-input {
			flex-grow: 0;
		}
	}

	.cui-button {
		align-self: stretch;
		height: auto; // for checkbox
		min-width: 0;
		flex-shrink: 1;
		padding-left: 5px;
		padding-right: 5px;
	}

	.cui-button-checkbox {
		display: flex;
		align-items: center;
	}

	.cui-checkbox {
		max-width: none !important;
	}

	.cui-buttonbar {
		margin-bottom: 0;
		min-width: 0;
		
		.cui-button {
			&:not(:first-child) {
				padding-left: 0;
			}

			&:not(:last-child) {
				padding-right: 0;
			}

			.cui-button-visual {
				padding-left: $padding/2;
				padding-right: $padding/2;
			}

			&.cui-button-appearance-flat {
				.cui-button-visual {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
	}

	.cui-label {
		flex-shrink: 1;
		min-width: 0;
		align-self: center;
		cursor: default;

		.cui-label-content {
			flex-shrink: 1;
			min-width: 0;
			display: block;
		}
	}
}

.cui-result-navigation-toolbar {
	min-height: $toolbar-height;
}

// Pane
.cui-pane-header {
	flex-wrap: nowrap;
	border-bottom: 1px solid $border;
	padding-right: 0;
	
	.cui-label {
		font-size: 14px;
		height: 100%;
    cursor: default;
    display: flex;
    align-items: center;
	}

	.cui-horizontal-layout-left {
		> *:only-child {
			padding-right: 0;
		}
	}

	> .cui-horizontal-layout-center {
		margin-right: $padding/2;
	}

	> .cui-horizontal-layout-right {
		margin-left: 0;
	}

	.cui-toolbar {
		min-height: 0;
		background: none;
		border-bottom-width: 0;
		flex-wrap: nowrap;
	}
}

.cui-pane-footer {
	border-top: 1px solid $border;
	min-height: $toolbar-height;
	
	.cui-horizontal-layout-left,
	.cui-horizontal-layout-right {
		min-width: auto;
	}

	.cui-label {
		color: $secondary-color;
		font-size: 12px;
	}

	.cui-button-size-big .cui-button-visual {
		border-width: 1px;
	}
}

// Simple Pane
.cui-simple-pane {
	&--padded {
		> .cui-vertical-layout-center {
			padding: $padding;
		}
	}

	> .cui-vertical-layout-center {
		overflow: auto;
	}
}

// Data Table
.cui-data-table {
	border: 1px solid $border;
	flex-shrink: 1;
	
	> .cui-vertical-layout-center {
		flex-shrink: 1;
	}
	
	.cui-pane-footer {
		min-height: 0;
		padding: 0;

		.cui-button-button {
			.cui-button-visual {
				@include button-reset;
				color: hsl(205,11%,29%);
			  height: 23px;
			  padding: 0 $padding/2;
			  border-right: 1px solid hsl(205,8%,77%) !important;
			}

			&:first-child {
				padding-left: 0;
			}
		  
		  &.cui-disabled {
		  	opacity: 1;
		  	pointer-events: auto;
		  	
		  	.cui-button-visual * {
		  		opacity: 0.5;
		  	}
		  }

		  &:before {
		    display: none;
		  }
		}

		.cui-buttonbar .cui-button {
			margin: 0;
		}
	}

	input,
	textarea {
		min-width: 0;
	}
}

// Icons
.cui-icon-svg {
	fill: currentColor;
	vertical-align: bottom;
	pointer-events: none;
	flex-shrink: 0;
	transform: translateZ(0); // make em icons sharp in Firefox
}

.fa {
	font-size: 14px;
	pointer-events: none;
}

i.fa-spinner {
	width: 1em;
}

i.cui-spin-stepped {
	-webkit-animation: fa-spin 1s steps(8) infinite;
	   -moz-animation: fa-spin 1s steps(8) infinite;
	    -ms-animation: fa-spin 1s steps(8) infinite;
	     -o-animation: fa-spin 1s steps(8) infinite;
	        animation: fa-spin 1s steps(8) infinite;
}

// adjust close x size
.fa-times-thin:before {
	font-size: 1.58em;
	content: '\00d7';
	display: block;
  margin-top: -0.09em;
}

// adjust arrow-left, arrow-right size
.fa-angle-right,
.fa-angle-left,
.fa-angle-down,
.fa-angle-up {
	&:before {
		font-size: 1.34em;
	}
}

// compensate right arrow spacing
.fa-angle-right {
	margin-left: 2px;
}

// compensate left arrow spacing
.fa-angle-left {
	margin-right: 2px;
}

// compensate down arrow spacing
.fa-angle-down {
	margin-bottom: -1px;
}

// adjust play icon weight
.fa-play {
	margin-right: -3px;
}

// Button / Select
.cui-button,
.cui-button-href {
	// max-width: 100%; makes button icons unsharp (datepicker)
	cursor: pointer;
}

.cui-button-href.cui-button-appearance-link {
	.cui-button-right {
		flex-shrink: 0;
		align-self: flex-start;
		margin-top: 2px;
		
		&:empty {
			display: block;
		}
	}
}

.cui-button-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	flex-grow: 1;
}

.cui-button-button,
.cui-button-select {
	flex: 0 0 auto;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	display: inline-flex; // if a button is not in a flex container, behave like "inline-block"
	white-space: nowrap;
	max-width: 100%;
	
	.cui-button-visual {
	  padding: 0 $padding;
	  height: 24px;
	  line-height: 22px;
	  color: $button-color;
	  background: $button-background;
	  border: 1px solid $button-border;
	  border-radius: $button-radius;
	}

	&.cui-layer-open,
	&:active {
		.cui-button-visual {
	  	background: $button-pressed;
	  }
	}

	&.cui-disabled {
	  cursor: default;
	  opacity: 1;
	  pointer-events: none;
	  
		.cui-button-visual {
		  color: $disabled-color;
		  border-color: $button-border;
	  }
	}

	&.cui-button-appearance-important, // removed [role] - makes it too specific
	&.cui-button--primary {
		.cui-button-visual {
			color: $on-highlight-color;
			background: $highlight-color;
			border-color: darken($highlight-color, 7%);
		}

		&.cui-layer-open,
		&:active {
			.cui-button-visual {
				color: darken($on-highlight-color, 9%);
				background: darken($highlight-color, 9%);
				border-color: darken($highlight-color, 16%);
			}
		}
	}

	&.cui-active {
		.cui-button-visual {
			color: $button-active-text;
			background: $button-active;
			border-color: $button-active-border;
		}

		&.cui-layer-open,
		&:active {
			.cui-button-visual {
				color: $button-active-pressed-text;
				background: $button-active-pressed;
				border-color: $button-active-pressed;
			}
		}
	}

	&:focus {
		outline: none;
		
		.cui-button-visual {
			@include border-focus;
		}
	}
}

.cui-button-appearance-flat {
	align-self: auto;
	margin: 3px 0;
	vertical-align: top;
	
	.cui-button-visual {
		@include button-reset;
		height: 18px;
		border-radius: $button-radius;
		color: desaturate($highlight-color, 80%);
	}

	&:active,
	&.cui-layer-open {
		.cui-button-visual {
			background: none;
		}
	}

	&.cui-active {
  	.cui-button-visual {
  		color: desaturate($highlight-color, 80%);
  		background: none;
  	}
  }

  &:focus {
  	.cui-button-visual {
  		@include focus;
  	}
  }
}

.cui-button-select {	
	.cui-button-visual {
		padding: 0 4px 0 8px;
	}

	.cui-button-center {
		padding-right: 6px;
		
		[data-max-chars] {
			text-align: inherit;
		}
	}
}

.cui-button-left,
.cui-button-center,
.cui-button-right {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: 0 3px;

	&:empty {
		display: none;
	}
}

.cui-button-center {
	flex-shrink: 1;
	min-width: 0;
	
	span {
		@include ellipsis;
	}
}

.cui-button-size-mini {
	font-size: 12px;
  height: 26px;

  &.cui-button-appearance-flat {
  	height: auto;
  }

  .cui-button-visual {
  	height: 20px;
  	padding: 0 $padding/4;
  }

  .fa {
  	font-size: 11px;
  }

  .cui-icon-svg {
  	transform: scale(0.75);
  	
  	&.svg-close {
  		transform: none;
  		width: 9px;
  		height: 9px;
  	}
  }
}

.cui-button-size-big {
	font-size: 11px;
	height: 60px;

	&.cui-button-appearance-flat {
		height: auto;
	}

	.cui-button-visual {
		line-height: 18px;
		height: auto;
		flex-direction: column;
		border-width: 0;
		padding: 0 $padding/2;
	}

	.cui-button-left {
		padding: 3px;
	}

	.fa {
		font-size: 20px;
	}
}

.cui-button-size-bigger {
	font-size: 18px;
	height: 43px;

	&.cui-button-appearance-flat {
		height: auto;
	}
}

a[role="button"].cui-button-appearance-link {
	height: initial;
	> .cui-button-center {
		word-break: break-all;
	}
}

.cui-button-appearance-link[role] {
	display: inline-flex;
	
	&,
	&:active {
		.cui-button-visual {
			@include button-reset;
			color: $highlight-color;
			line-height: 18px;
		}
	}

	&:focus {
		.cui-button-visual {
			text-decoration: underline;
		}
	}

	.cui-button-center {
		padding: 0;
		
		span {
			white-space: normal;
		}
	}
}


// Checkbox
.cui-checkbox {
	min-width: 0;
	display: inline-block;
	
	&.cui-data-field-disabled {
		opacity: 1;
	}

	&--icon {
		.cui-button-checkbox {
			.cui-button-left i {
				border: none;
				background: none;
				font-size: 14px;
				opacity: 0.2;
			}

			&.cui-active {
				.cui-button-left i {
					background: none;
					color: inherit;
					text-shadow: none;
					opacity: 1;
				}
			}
		}
	}
}

.cui-button-checkbox {
	display: flex;
	flex-direction: row;
	cursor: pointer;
	line-height: 18px;
	white-space: initial;
	align-self: flex-start;
	max-width: 100%;
	padding: 3px 0;
	
	[data-max-chars] {
		text-align: inherit;
	}

	&.cui-disabled {
		color: $disabled-color;
		opacity: 1;
		pointer-events: none;
		
		.cui-button-left {
			opacity: 0.27;	
		}
	}

	&:focus {
		outline: none;

		.cui-button-left span,
		.cui-button-left i {
			@include border-focus;
		}
	}

	&.cui-active {
		.cui-button-left i {
			position: relative;
			background: hsl(240,2%,61%);
			border-color: hsl(240,3%,58%);
			color: white;
			text-shadow: 0 1px rgba(0,0,0,.2);
		}

		&[role="radio"] {
			.cui-button-left i {
				color: transparent;
				text-shadow: none;

				// use radial gradient instead of border-radius
				// for a nice round form (otherwise its more of an egg)
				border-radius: none;
				border-color: transparent;
				background: radial-gradient(hsl(240,2%,61%), hsl(240,3%,58%));

				&:after { // radio dot
					content: "";
					position: absolute;
					left: 50%;
					top: 50%;
					width: 6px;
					height: 6px;
					margin: -3px 0 0 -3px;
					border-radius: 100%;
					background: white;
					box-shadow: 0 1px rgba(0,0,0,.2);
				}
			}
		}
	}

	.cui-button-visual {
		justify-content: flex-start;
		flex: 1 0 auto;
		align-items: flex-start;
	}

	.cui-button-left {
		padding: 3px 2px 0 0;
		// empty checkbox: span
		// filled checkbox: i
		span,
		i {
			display: inline-block;
			width: 12px;
			height: 12px;
			border: 1px solid hsl(0,0%,72%);
			border-top-color: hsl(0,0%,65%);
			border-bottom-color: hsl(0,0%,72%);
			background: white;
			font-size: 11px;
			line-height: 11px;
			border-radius: 2px;
			box-shadow: 0 1px rgba(0,0,0,.05) inset;
		}
	}

	.cui-button-center {
		min-width: 0;
		flex: 1 1 auto;
		justify-content: flex-start;
		
		span {
			white-space: normal;
		}
	}

	&[role="radio"] {
		.cui-button-left {
			padding-top: 2px;
			
			span,
			i {
				width: 14px;
				height: 14px;
				border-radius: 100%;
			}
		}
	}
}

// Panel
.cui-panel {
	border-bottom: 1px solid $soft-border;
	
	& + &,
	&:first-child {
		.cui-panel-header {
			border-top: none;
		}
	}

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

	&-closed {
		> .cui-panel-header,
		&:last-child {
			border-bottom: none;
		}
		
		> .cui-panel-body {
			display: none;
		}
	}
}

.cui-panel-header {
	border-top: 1px solid $soft-border;
	border-bottom: 1px solid $soft-border;
	position: relative;
	background: $toolbar-background;
	flex-shrink: 0;
	box-sizing: content-box;

	.cui-button {
		width: 100%;
		height: 100%;
		align-items: stretch;
		
		.cui-button-visual {
			@include button-reset;
			line-height: 22px;
			justify-content: flex-start;
			padding: 6px $padding;
		}

		&:active {
			.cui-button-visual {
				background: none;
				color: inherit;
			}
		}

		.cui-button-left {
			width: 22px;
			padding-top: 2px;
		}
		
		.cui-button-center {
			span {
				white-space: normal;
			}
		}

		.fa-angle-right {
			padding-left: 3px;
		}

		.fa-angle-right {
			margin-top: -1px;
		}
	}
}


// Label
.cui-label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	max-width: 100%;
	line-height: 18px;

	&.cui-tmpl-label-rotate-90 {
		align-items: flex-end;
		white-space: nowrap;
		margin: $padding/2 0;
		flex-shrink: 0;
		max-width: none;
		
		&:before {
			content: "";
			float: left;
			margin-top: 100%;
		}
		
		> .cui-label-transform {
			transform: rotate(-90deg)  translateX(-3px) translateY(100%);
			transform-origin: left bottom;
		}

		.cui-label-content {
			white-space: nowrap !important;
		}
	}

	&-icon {
		&:empty {
			display: none;
		}

		.fa {
			line-height: 18px;
		}
	}

	&-size-mini {
		font-size: 11px;
		line-height: 14px;
	}

	&-size-big {
		.cui-label-icon {
			.fa {
				font-size: 21px;
			}
		}
	}

	&-icon:not(:empty) + .cui-label-content:not(:empty) {
		padding-left: $padding/2;
	}

	&-content {
		flex: 0 0 auto;
		max-width: 100%;
		@include ellipsis;

		&:empty {
			display: none;
		}

		p {
			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		// highlight
		em {
			background: hsl(55,100%,60%);
			font-style: normal;
		}
	}
}

// Label: Markdown
.cui-label-markdown .cui-label-content {
	display: block;

	h1, h2, h3, h4, h5, h6 {
	  font-weight: normal;
	  margin: 0 0 $padding;
	}

	h1 {
	  font-size: 24px;
	  line-height: 30px;
	}

	h2 {
	  font-size: 20px;
	  line-height: 25px;
	}

	a {
		color: $highlight-color;
		text-decoration: underline;
	}

	p,
  pre,
  blockquote {
    margin: 0 0 16px;
  }

  & > p,
  & > pre,
  & > blockquote {
    &:last-child {
      margin-bottom: 0;
    }
  }

  blockquote {
    padding: 8px 12px;
    border-left: 5px solid #eee;
  }

  code {
    border: none;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
  }

  pre {
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.45;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
    border-radius: 3px;
    border: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  hr {
    margin-top: 6px;
    margin-bottom: 6px;
    border: 0;
    border-top: 1px solid #dfdfdf;
  }
}

// Label: Multiline
.cui-label-multiline {
	// Conflict: makes it center vertically align in center
	// align-self: stretch;
	max-width: 100%; // prevent overflow when its the child of a flex parent

	& + & {
		margin-top: $padding;
	}

	&:not(.cui-label-markdown) {
		// this does not work in IE, but will
		// be ignored by IE, so we are good
		word-break: break-word;
		
		.cui-label-content {
			white-space: pre-wrap;
		}
	}

	> .cui-label-content {
		flex: 1 1 auto;
		white-space: normal;
	}

	.cui-label-content span {
		// white-space: normal;
		// white-space has to pre-wrap - otherwise it breaks the whole concept of a multiline label
		// example: collection description
	}
}

// Label: Manage Overflow

.cui-label-manage-overflow {
	> .cui-label-content {
		max-height: 75px;
		overflow: hidden;
	}
	
	&.cui-label--overflow-hidden {
		> .cui-label-content > .cui-label-manage-overflow-button-container {
			padding-top: 18px;
			margin-top: -18px;
		}
	}<commit_msg>Multiline Label<commit_after>/*
 * coffeescript-ui - Coffeescript User Interface System (CUI)
 * Copyright (c) 2013 - 2016 Programmfabrik GmbH
 * MIT Licence
 * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
*/

@import '../../icons/_svg-dimensions.scss';
@import url($font_awesome_url);

// reset

table {
	border-collapse: collapse;
}

td {
	vertical-align: top;
	padding: 0;
	margin: 0;
}

ul {
	margin: 0;
	padding-left: 16px;
}

a {
	text-decoration: none;
	color: black;
}

.italic {
	font-style: italic;
}

// basics

html {
	overflow: hidden;
  width: 100%;
  height: 100%;
}

label {
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	font-size: 13px;
	line-height: normal;
	background: $background;
	display: flex;
	width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

input,
textarea {
	-webkit-appearance: none;
	        appearance: none;
	width: 100%;
	min-width: 100px;
	font-size: 12px;
	border: 1px solid $input-border;
	border-top-color: darken($input-border, 3%);
	border-radius: $input-radius;
	background: $foreground;
	font-family: inherit;
	padding: 2px 3px;
	margin: 0;
	flex: 1 1 auto;
	box-sizing: border-box;
	resize: vertical;
	
	&.cui-input-shadow {
		position: absolute;
		display: block;
		padding: 0;
		border: none;
		top: -1000px;
		left: -1000px;
	}
}

[data-max-chars] {
	box-sizing: content-box;
	text-align: center;
}

// enlarge max-chars < 10
// e.g. max-chars 5 = 5.5ch
@for $i from 1 through 10 {
	[data-max-chars="#{$i}"] {
		width: #{$i + 0.5}ch;
	}
}

// damp max-chars > 10
// e.g. max-chars 30 = 26ch
@for $i from 10 through 40 {
	[data-max-chars="#{$i}"] {
		width: #{$i*(1 - ($i - 10)/30*0.15)}ch;
	}
}

.cui-browser-ie:not(.cui-browser-edge) {
	@for $i from 1 through 10 {
		[data-max-chars="#{$i}"] {
			width: #{$i + 1.5}ch;
		}
	}

	@for $i from 10 through 40 {
		[data-max-chars="#{$i}"] {
			width: #{$i*(1.54 - ($i - 10)/30*0.15)}ch;
		}
	}
}

input[data-max-chars] {
	min-width: 0;
}

body[data-cursor="grabbing"] * {
	cursor: -webkit-grabbing !important;
	cursor: grabbing !important;
}

$drag-cursors: "default", "move", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize";

@for $i from 1 to length($drag-cursors) {
	$cursor: nth($drag-cursors, $i);

	body[data-cursor="#{$cursor}"] * {
		cursor: $cursor !important;
	}
}

* {
	box-sizing: border-box;
}

li > div {
	display: inline-flex;
}

.cui-root-layout {
	overflow: hidden;
}

// HorizontalLayout
.cui-horizontal-layout {
	display: flex;
	flex-shrink: 0;
	
	&.cui-maximize-horizontal {
		flex-direction: row;
		overflow: auto;

		> .cui-horizontal-layout-left {
			position: relative;
			overflow: auto;
		}
		> .cui-horizontal-layout-center {
			position: relative;
			flex: 1 1 0%;
			min-width: 0;
			overflow: auto;
		}
		> .cui-horizontal-layout-right {
			overflow: auto;
		}
	}

	&.cui-maximize-vertical {
		flex: 1 1 auto;
		max-width: 100%;
		min-height: 0;
	}

	&:not(.cui-maximize-horizontal) {
		flex-direction: row;
	}
}

.cui-horizontal-layout-left,
.cui-horizontal-layout-center,
.cui-horizontal-layout-right {
	display: flex;
	flex-direction: column;
	
	> .cui-label {
		padding: 0 $padding;
		
		& + .cui-label {
			padding-left: 0;
		}
	}
}


// VerticalLayout
.cui-vertical-layout {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: hidden;
	
	&.cui-maximize-vertical {
		flex: 1 1 auto;
		min-height: 0;
		max-height: 100%; // used in cui-pane-fill-screen

		> .cui-vertical-layout-top,
		> .cui-vertical-layout-bottom {
			position: relative;
			flex-shrink: 0;
			overflow: hidden;
		}

		> .cui-vertical-layout-center {
			position: relative;
			flex: 1 1 auto;
			min-height: 0;
			overflow: auto;
		}
	}

	&.cui-absolute {
		position: relative;
		width: 100%;
		height: 100%;

		& > div {
			position: absolute !important; // overwrite "relative" from above
			left: 0;
			right: 0;
			width: 100%;
		}

		& > .cui-vertical-layout-top {
			top: 0;
		}

		& > .cui-vertical-layout-center {
			top: 0; // overwritten by Layout.coffee
			bottom: 0; // overwritten by Layout.coffee
		}

		& > .cui-vertical-layout-bottom {
			bottom: 0;
		}
	}
}

.cui-vertical-layout-top,
.cui-vertical-layout-center,
.cui-vertical-layout-bottom {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	
	> .cui-sticky-header {
		flex-basis: auto;
	}
}

// Layout Absolute Horizontal
.cui-horizontal-layout.cui-absolute {
  position: relative;

  width: 100%;
  height: 100%;

  & > div {
		position: absolute !important; // overwrite "relative" from above
    top: 0;
    bottom: 0;
  }
  & > .cui-horizontal-layout-left {
    left: 0;
  }
  & > .cui-horizontal-layout-center {
    left: 0;  // overwritten by Layout.coffee
    right: 0;  // overwritten by Layout.coffee
  }

  & > .cui-horizontal-layout-right {
    right: 0;
  }
}


// Flexhandle

.cui-flex-handle-hidden {
	display: none;
}

.cui-flex-handle {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	-webkit-user-select: none;
	        user-select: none;

	&.cui-flex-handle-has-label:not(.cui-flex-handle-closed) {
		.cui-label {
			display: none;
		}
	}
}

.cui-flex-handle-row {
	width: 10px;
	margin: 0 -5px;
	
	&:not(.cui-flex-handle-closed) {
		cursor: ew-resize;
	}
	&.cui-flex-handle-closed {
		cursor: pointer;
	}
	&.cui-flex-handle-manual-size {
		// background-color: #64fdd8;
	}
	&.cui-flex-handle-has-label.cui-flex-handle-closed {
		width: 32px;
		margin: 0;
		background: white;
		
		.cui-label.cui-tmpl-label-rotate-90 {
			font-size: 14px;
			margin: 11px 0;
			margin-left: -2px;
			
			.cui-label-transform {
				transform: rotate(-90deg) translateY(150%);
				transform-origin: left bottom;
			}
		}
	}
}

.cui-flex-handle-column {
	height: 10px;
	margin: -5px 0;
	width: 100%;
	
	&.cui-flex-handle-has-label.cui-flex-handle-closed {
		margin: 0;
	}

	&:not(.cui-flex-handle-closed) {
		cursor: ns-resize;
	}

	&.cui-flex-handle-closed {
		cursor: pointer;
	}
}


.cui-flex-handle-stretched {
	flex: 1 1 auto !important;
}

.cui-flex-handle-hide-for-stretch {
	display: none;
}

.cui-is-manually-sized {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	
	& + .cui-flex-handle + * {
		flex-shrink: 1 !important;
	}
}


.cui-tmpl-pane-fill-screen {
  transition: top ease-out 0.5s,right ease-out 0.5s,left ease-out 0.5s,bottom ease-out 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

	// Pane Fillscreen
	.cui-pane-fill-screen {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
		
		.cui-pane-fill-screen-inner {
			width: 100%;
			height: 100%;
		}
	}

	// overwrite "style" set by code
  &.cui-pane-fill-screen-is-on {
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

// BorderLayout

.cui-border-layout-north,
.cui-border-layout-south,
.cui-border-layout-west,
.cui-border-layout-east {
	&:empty {
		display: none;
	}
}

// Toolbar
.cui-toolbar {
	display: flex;
	min-height: $toolbar-height;
	justify-content: space-between;
	background: $toolbar-background;
	// needed in listview, to align all: content-box for all!
	box-sizing: content-box;
	overflow: visible !important;

	& + & {
		padding-bottom: 1px;
		
		&:last-child {
			padding-bottom: 0;
		}
	}
	
	&.cui-pane-toolbar {
		border-bottom: 1px solid $border;
	}
	
	> .cui-horizontal-layout-left,
	> .cui-horizontal-layout-right {
		flex-direction: row;
		min-width: 0;
		overflow: visible !important;
	}

	.cui-horizontal-layout-center {
		flex-direction: row;
	}

	> div {
		&.cui-horizontal-layout-center {
			justify-content: center;
			overflow: visible !important;
		}

		> .cui-maximize-horizontal {
			// in column direction this is solved by
			// align-items: stretch, but here
			// we need to overwrite this
			flex: 1 1 auto;
			align-self: stretch;
			overflow: visible;

			> .cui-horizontal-layout-left,
			> .cui-horizontal-layout-center,
			> .cui-horizontal-layout-right {
				overflow: visible;
			}
		}
	}

	.cui-horizontal-layout-left {
		> .cui-label {
			// reset padding: 0 $padding; in cui-horizontal-layout-left
			&:first-child {
				padding-left: $padding/2 + 3px;
			}
			
			&:last-child {
				padding-right: 0;
			}
		}
	}

	.cui-horizontal-layout-right {
		margin-left: $gap;
		flex-shrink: 0;
		
		&:empty {
			margin-left: 0;
		}
	}

	&.cui-template-empty {
		display: none;
	}

	.cui-data-field-input {
		display: flex;
		align-items: center;
		min-width: 0;
		
		&.cui-vertical-layout {
			align-items: stretch;
			justify-content: center;
		}
		
		.cui-input {
			flex-grow: 0;
		}
	}

	.cui-button {
		align-self: stretch;
		height: auto; // for checkbox
		min-width: 0;
		flex-shrink: 1;
		padding-left: 5px;
		padding-right: 5px;
	}

	.cui-button-checkbox {
		display: flex;
		align-items: center;
	}

	.cui-checkbox {
		max-width: none !important;
	}

	.cui-buttonbar {
		margin-bottom: 0;
		min-width: 0;
		
		.cui-button {
			&:not(:first-child) {
				padding-left: 0;
			}

			&:not(:last-child) {
				padding-right: 0;
			}

			.cui-button-visual {
				padding-left: $padding/2;
				padding-right: $padding/2;
			}

			&.cui-button-appearance-flat {
				.cui-button-visual {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
	}

	.cui-label {
		flex-shrink: 1;
		min-width: 0;
		align-self: center;
		cursor: default;

		.cui-label-content {
			flex-shrink: 1;
			min-width: 0;
			display: block;
		}
	}
}

.cui-result-navigation-toolbar {
	min-height: $toolbar-height;
}

// Pane
.cui-pane-header {
	flex-wrap: nowrap;
	border-bottom: 1px solid $border;
	padding-right: 0;
	
	.cui-label {
		font-size: 14px;
		height: 100%;
    cursor: default;
    display: flex;
    align-items: center;
	}

	.cui-horizontal-layout-left {
		> *:only-child {
			padding-right: 0;
		}
	}

	> .cui-horizontal-layout-center {
		margin-right: $padding/2;
	}

	> .cui-horizontal-layout-right {
		margin-left: 0;
	}

	.cui-toolbar {
		min-height: 0;
		background: none;
		border-bottom-width: 0;
		flex-wrap: nowrap;
	}
}

.cui-pane-footer {
	border-top: 1px solid $border;
	min-height: $toolbar-height;
	
	.cui-horizontal-layout-left,
	.cui-horizontal-layout-right {
		min-width: auto;
	}

	.cui-label {
		color: $secondary-color;
		font-size: 12px;
	}

	.cui-button-size-big .cui-button-visual {
		border-width: 1px;
	}
}

// Simple Pane
.cui-simple-pane {
	&--padded {
		> .cui-vertical-layout-center {
			padding: $padding;
		}
	}

	> .cui-vertical-layout-center {
		overflow: auto;
	}
}

// Data Table
.cui-data-table {
	border: 1px solid $border;
	flex-shrink: 1;
	
	> .cui-vertical-layout-center {
		flex-shrink: 1;
	}
	
	.cui-pane-footer {
		min-height: 0;
		padding: 0;

		.cui-button-button {
			.cui-button-visual {
				@include button-reset;
				color: hsl(205,11%,29%);
			  height: 23px;
			  padding: 0 $padding/2;
			  border-right: 1px solid hsl(205,8%,77%) !important;
			}

			&:first-child {
				padding-left: 0;
			}
		  
		  &.cui-disabled {
		  	opacity: 1;
		  	pointer-events: auto;
		  	
		  	.cui-button-visual * {
		  		opacity: 0.5;
		  	}
		  }

		  &:before {
		    display: none;
		  }
		}

		.cui-buttonbar .cui-button {
			margin: 0;
		}
	}

	input,
	textarea {
		min-width: 0;
	}
}

// Icons
.cui-icon-svg {
	fill: currentColor;
	vertical-align: bottom;
	pointer-events: none;
	flex-shrink: 0;
	transform: translateZ(0); // make em icons sharp in Firefox
}

.fa {
	font-size: 14px;
	pointer-events: none;
}

i.fa-spinner {
	width: 1em;
}

i.cui-spin-stepped {
	-webkit-animation: fa-spin 1s steps(8) infinite;
	   -moz-animation: fa-spin 1s steps(8) infinite;
	    -ms-animation: fa-spin 1s steps(8) infinite;
	     -o-animation: fa-spin 1s steps(8) infinite;
	        animation: fa-spin 1s steps(8) infinite;
}

// adjust close x size
.fa-times-thin:before {
	font-size: 1.58em;
	content: '\00d7';
	display: block;
  margin-top: -0.09em;
}

// adjust arrow-left, arrow-right size
.fa-angle-right,
.fa-angle-left,
.fa-angle-down,
.fa-angle-up {
	&:before {
		font-size: 1.34em;
	}
}

// compensate right arrow spacing
.fa-angle-right {
	margin-left: 2px;
}

// compensate left arrow spacing
.fa-angle-left {
	margin-right: 2px;
}

// compensate down arrow spacing
.fa-angle-down {
	margin-bottom: -1px;
}

// adjust play icon weight
.fa-play {
	margin-right: -3px;
}

// Button / Select
.cui-button,
.cui-button-href {
	// max-width: 100%; makes button icons unsharp (datepicker)
	cursor: pointer;
}

.cui-button-href.cui-button-appearance-link {
	.cui-button-right {
		flex-shrink: 0;
		align-self: flex-start;
		margin-top: 2px;
		
		&:empty {
			display: block;
		}
	}
}

.cui-button-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	flex-grow: 1;
}

.cui-button-button,
.cui-button-select {
	flex: 0 0 auto;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	display: inline-flex; // if a button is not in a flex container, behave like "inline-block"
	white-space: nowrap;
	max-width: 100%;
	
	.cui-button-visual {
	  padding: 0 $padding;
	  height: 24px;
	  line-height: 22px;
	  color: $button-color;
	  background: $button-background;
	  border: 1px solid $button-border;
	  border-radius: $button-radius;
	}

	&.cui-layer-open,
	&:active {
		.cui-button-visual {
	  	background: $button-pressed;
	  }
	}

	&.cui-disabled {
	  cursor: default;
	  opacity: 1;
	  pointer-events: none;
	  
		.cui-button-visual {
		  color: $disabled-color;
		  border-color: $button-border;
	  }
	}

	&.cui-button-appearance-important, // removed [role] - makes it too specific
	&.cui-button--primary {
		.cui-button-visual {
			color: $on-highlight-color;
			background: $highlight-color;
			border-color: darken($highlight-color, 7%);
		}

		&.cui-layer-open,
		&:active {
			.cui-button-visual {
				color: darken($on-highlight-color, 9%);
				background: darken($highlight-color, 9%);
				border-color: darken($highlight-color, 16%);
			}
		}
	}

	&.cui-active {
		.cui-button-visual {
			color: $button-active-text;
			background: $button-active;
			border-color: $button-active-border;
		}

		&.cui-layer-open,
		&:active {
			.cui-button-visual {
				color: $button-active-pressed-text;
				background: $button-active-pressed;
				border-color: $button-active-pressed;
			}
		}
	}

	&:focus {
		outline: none;
		
		.cui-button-visual {
			@include border-focus;
		}
	}
}

.cui-button-appearance-flat {
	align-self: auto;
	margin: 3px 0;
	vertical-align: top;
	
	.cui-button-visual {
		@include button-reset;
		height: 18px;
		border-radius: $button-radius;
		color: desaturate($highlight-color, 80%);
	}

	&:active,
	&.cui-layer-open {
		.cui-button-visual {
			background: none;
		}
	}

	&.cui-active {
  	.cui-button-visual {
  		color: desaturate($highlight-color, 80%);
  		background: none;
  	}
  }

  &:focus {
  	.cui-button-visual {
  		@include focus;
  	}
  }
}

.cui-button-select {	
	.cui-button-visual {
		padding: 0 4px 0 8px;
	}

	.cui-button-center {
		padding-right: 6px;
		
		[data-max-chars] {
			text-align: inherit;
		}
	}
}

.cui-button-left,
.cui-button-center,
.cui-button-right {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: 0 3px;

	&:empty {
		display: none;
	}
}

.cui-button-center {
	flex-shrink: 1;
	min-width: 0;
	
	span {
		@include ellipsis;
	}
}

.cui-button-size-mini {
	font-size: 12px;
  height: 26px;

  &.cui-button-appearance-flat {
  	height: auto;
  }

  .cui-button-visual {
  	height: 20px;
  	padding: 0 $padding/4;
  }

  .fa {
  	font-size: 11px;
  }

  .cui-icon-svg {
  	transform: scale(0.75);
  	
  	&.svg-close {
  		transform: none;
  		width: 9px;
  		height: 9px;
  	}
  }
}

.cui-button-size-big {
	font-size: 11px;
	height: 60px;

	&.cui-button-appearance-flat {
		height: auto;
	}

	.cui-button-visual {
		line-height: 18px;
		height: auto;
		flex-direction: column;
		border-width: 0;
		padding: 0 $padding/2;
	}

	.cui-button-left {
		padding: 3px;
	}

	.fa {
		font-size: 20px;
	}
}

.cui-button-size-bigger {
	font-size: 18px;
	height: 43px;

	&.cui-button-appearance-flat {
		height: auto;
	}
}

a[role="button"].cui-button-appearance-link {
	height: initial;
	> .cui-button-center {
		word-break: break-all;
	}
}

.cui-button-appearance-link[role] {
	display: inline-flex;
	
	&,
	&:active {
		.cui-button-visual {
			@include button-reset;
			color: $highlight-color;
			line-height: 18px;
		}
	}

	&:focus {
		.cui-button-visual {
			text-decoration: underline;
		}
	}

	.cui-button-center {
		padding: 0;
		
		span {
			white-space: normal;
		}
	}
}


// Checkbox
.cui-checkbox {
	min-width: 0;
	display: inline-block;
	
	&.cui-data-field-disabled {
		opacity: 1;
	}

	&--icon {
		.cui-button-checkbox {
			.cui-button-left i {
				border: none;
				background: none;
				font-size: 14px;
				opacity: 0.2;
			}

			&.cui-active {
				.cui-button-left i {
					background: none;
					color: inherit;
					text-shadow: none;
					opacity: 1;
				}
			}
		}
	}
}

.cui-button-checkbox {
	display: flex;
	flex-direction: row;
	cursor: pointer;
	line-height: 18px;
	white-space: initial;
	align-self: flex-start;
	max-width: 100%;
	padding: 3px 0;
	
	[data-max-chars] {
		text-align: inherit;
	}

	&.cui-disabled {
		color: $disabled-color;
		opacity: 1;
		pointer-events: none;
		
		.cui-button-left {
			opacity: 0.27;	
		}
	}

	&:focus {
		outline: none;

		.cui-button-left span,
		.cui-button-left i {
			@include border-focus;
		}
	}

	&.cui-active {
		.cui-button-left i {
			position: relative;
			background: hsl(240,2%,61%);
			border-color: hsl(240,3%,58%);
			color: white;
			text-shadow: 0 1px rgba(0,0,0,.2);
		}

		&[role="radio"] {
			.cui-button-left i {
				color: transparent;
				text-shadow: none;

				// use radial gradient instead of border-radius
				// for a nice round form (otherwise its more of an egg)
				border-radius: none;
				border-color: transparent;
				background: radial-gradient(hsl(240,2%,61%), hsl(240,3%,58%));

				&:after { // radio dot
					content: "";
					position: absolute;
					left: 50%;
					top: 50%;
					width: 6px;
					height: 6px;
					margin: -3px 0 0 -3px;
					border-radius: 100%;
					background: white;
					box-shadow: 0 1px rgba(0,0,0,.2);
				}
			}
		}
	}

	.cui-button-visual {
		justify-content: flex-start;
		flex: 1 0 auto;
		align-items: flex-start;
	}

	.cui-button-left {
		padding: 3px 2px 0 0;
		// empty checkbox: span
		// filled checkbox: i
		span,
		i {
			display: inline-block;
			width: 12px;
			height: 12px;
			border: 1px solid hsl(0,0%,72%);
			border-top-color: hsl(0,0%,65%);
			border-bottom-color: hsl(0,0%,72%);
			background: white;
			font-size: 11px;
			line-height: 11px;
			border-radius: 2px;
			box-shadow: 0 1px rgba(0,0,0,.05) inset;
		}
	}

	.cui-button-center {
		min-width: 0;
		flex: 1 1 auto;
		justify-content: flex-start;
		
		span {
			white-space: normal;
		}
	}

	&[role="radio"] {
		.cui-button-left {
			padding-top: 2px;
			
			span,
			i {
				width: 14px;
				height: 14px;
				border-radius: 100%;
			}
		}
	}
}

// Panel
.cui-panel {
	border-bottom: 1px solid $soft-border;
	
	& + &,
	&:first-child {
		.cui-panel-header {
			border-top: none;
		}
	}

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

	&-closed {
		> .cui-panel-header,
		&:last-child {
			border-bottom: none;
		}
		
		> .cui-panel-body {
			display: none;
		}
	}
}

.cui-panel-header {
	border-top: 1px solid $soft-border;
	border-bottom: 1px solid $soft-border;
	position: relative;
	background: $toolbar-background;
	flex-shrink: 0;
	box-sizing: content-box;

	.cui-button {
		width: 100%;
		height: 100%;
		align-items: stretch;
		
		.cui-button-visual {
			@include button-reset;
			line-height: 22px;
			justify-content: flex-start;
			padding: 6px $padding;
		}

		&:active {
			.cui-button-visual {
				background: none;
				color: inherit;
			}
		}

		.cui-button-left {
			width: 22px;
			padding-top: 2px;
		}
		
		.cui-button-center {
			span {
				white-space: normal;
			}
		}

		.fa-angle-right {
			padding-left: 3px;
		}

		.fa-angle-right {
			margin-top: -1px;
		}
	}
}


// Label
.cui-label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	max-width: 100%;
	line-height: 18px;

	&.cui-tmpl-label-rotate-90 {
		align-items: flex-end;
		white-space: nowrap;
		margin: $padding/2 0;
		flex-shrink: 0;
		max-width: none;
		
		&:before {
			content: "";
			float: left;
			margin-top: 100%;
		}
		
		> .cui-label-transform {
			transform: rotate(-90deg)  translateX(-3px) translateY(100%);
			transform-origin: left bottom;
		}

		.cui-label-content {
			white-space: nowrap !important;
		}
	}

	&-icon {
		&:empty {
			display: none;
		}

		.fa {
			line-height: 18px;
		}
	}

	&-size-mini {
		font-size: 11px;
		line-height: 14px;
	}

	&-size-big {
		.cui-label-icon {
			.fa {
				font-size: 21px;
			}
		}
	}

	&-icon:not(:empty) + .cui-label-content:not(:empty) {
		padding-left: $padding/2;
	}

	&-content {
		flex: 0 0 auto;
		max-width: 100%;
		@include ellipsis;

		&:empty {
			display: none;
		}

		p {
			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		// highlight
		em {
			background: hsl(55,100%,60%);
			font-style: normal;
		}
	}
}

// Label: Markdown
.cui-label-markdown .cui-label-content {
	display: block;

	h1, h2, h3, h4, h5, h6 {
	  font-weight: normal;
	  margin: 0 0 $padding;
	}

	h1 {
	  font-size: 24px;
	  line-height: 30px;
	}

	h2 {
	  font-size: 20px;
	  line-height: 25px;
	}

	a {
		color: $highlight-color;
		text-decoration: underline;
	}

	p,
  pre,
  blockquote {
    margin: 0 0 16px;
  }

  & > p,
  & > pre,
  & > blockquote {
    &:last-child {
      margin-bottom: 0;
    }
  }

  blockquote {
    padding: 8px 12px;
    border-left: 5px solid #eee;
  }

  code {
    border: none;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
  }

  pre {
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.45;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
    border-radius: 3px;
    border: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  hr {
    margin-top: 6px;
    margin-bottom: 6px;
    border: 0;
    border-top: 1px solid #dfdfdf;
  }
}

// Label: Multiline
.cui-label-multiline {
	// Conflict: makes it center vertically align in center
	// align-self: stretch;
	max-width: 100%; // prevent overflow when its the child of a flex parent
	display: flex;

	& + & {
		margin-top: $padding;
	}

	&:not(.cui-label-markdown) {
		// this does not work in IE, but will
		// be ignored by IE, so we are good
		word-break: break-word;
		
		.cui-label-content {
			white-space: pre-wrap;
		}
	}

	> .cui-label-content {
		flex: 1 1 0%;
		white-space: normal;
	}

	.cui-label-content span {
		// white-space: normal;
		// white-space has to pre-wrap - otherwise it breaks the whole concept of a multiline label
		// example: collection description
	}
}

// Label: Manage Overflow

.cui-label-manage-overflow {
	> .cui-label-content {
		max-height: 75px;
		overflow: hidden;
	}
	
	&.cui-label--overflow-hidden {
		> .cui-label-content > .cui-label-manage-overflow-button-container {
			padding-top: 18px;
			margin-top: -18px;
		}
	}
{'fraction_non_alphanumeric': 0.16612634901676407, 'fraction_numerical': 0.027278931877319456, 'mean_word_length': 2.566364950178748, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 89, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1050197', 'n_tokens_mistral': 22733, 'n_tokens_neox': 19159, 'n_words': 3797}