html#{$cadmin-selector} {
	.cadmin.portlet-topper {
		background-color: $portlet-topper-bg;
		border-color: $portlet-topper-border;
		border-radius: $portlet-topper-border-radius;
		border-style: solid;
		border-width: $portlet-topper-border-width;
		color: $portlet-topper-color;
		display: box;
		display: flex;
		height: 28px;
		padding: 3px 12px 3px 24px;
		position: relative;

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

		.lexicon-icon.lexicon-icon-drag {
			height: 16px;
			width: 16px;
		}
	}

	.portlet > .cadmin.portlet-topper {
		display: none;

		@include media-breakpoint-up(md) {
			display: flex;
			left: 0;
			opacity: 0;
			position: absolute;
			right: 0;
			transform: translateY(-97%);

			@include transition(opacity 0.15s);

			top: 0;
		}
	}

	.cadmin {
		.portlet-actions {
			float: right;
		}

		.portlet-options {
			display: inline-block;
		}

		.portlet-title-menu {
			flex: 0 1 auto;

			> span > a {
				display: inline-block;
				text-decoration: none;
			}
		}

		.portlet-topper-toolbar {
			margin: 0;
			padding-left: 0;

			> a,
			> span > a,
			.lfr-icon-menu > a {
				color: $portlet-topper-link-color;
			}

			> a {
				&:focus,
				&:hover {
					text-decoration: none;
				}
			}
		}

		.portlet-name-text {
			font-size: 12px;
			font-weight: 600;
			margin-left: 4px;
		}

		.portlet-title-default {
			flex: 1 1 auto;
			line-height: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.lfr-configurator-visibility {
		@include media-breakpoint-up(sm) {
			.portlet {
				&:hover,
				&.focus,
				&.open {
					.portlet-topper {
						opacity: 0.5;
					}
				}
			}
		}
	}

	.controls-visible {
		.portlet {
			&:hover,
			&.open,
			&.focus {
				> .portlet-content-editable {
					@include media-breakpoint-up(md) {
						border-color: $portlet-topper-border;
						border-top-left-radius: 0;
						border-top-right-radius: 0;
					}
				}

				> .cadmin.portlet-topper {
					@include media-breakpoint-up(md) {
						opacity: 1;
					}
				}
			}

			&.open {
				> .cadmin.portlet-topper {
					@include media-breakpoint-up(md) {
						transition-duration: 0ms;
					}
				}
			}
		}
	}

	.controls-visible {
		.cadmin {
			&.portlet-topper {
				@include media-breakpoint-down(sm) {
					align-items: center;
					display: box;
					display: flex;
				}
			}

			.portlet-topper-toolbar {
				display: block;
			}
		}
	}
}

.portlet {
	margin-bottom: 10px;
	position: relative;

	.controls-visible & {
		&:hover,
		&.open,
		&.focus {
			> .portlet-content-editable {
				@include media-breakpoint-up(md) {
					border-color: $portlet-topper-border;
					border-top-left-radius: 0;
					border-top-right-radius: 0;
				}
			}

			> .portlet-topper {
				@include media-breakpoint-up(md) {
					opacity: 1;
				}
			}
		}
	}

	@include media-breakpoint-up(sm) {
		.lfr-configurator-visibility & {
			&:hover,
			&.focus,
			&.open {
				.portlet-topper {
					opacity: 0.5;
				}
			}
		}
	}
}

.portlet-content-editable {
	border-color: $portlet-topper-border;
	border-radius: $portlet-content-border-radius;
	border-style: solid;
	border-width: $portlet-content-border-width;
	transition: border-color 0.15s ease;

	.portlet > & {
		border-color: transparent;
	}

	@include media-breakpoint-down(sm) {
		.controls-visible & {
			border-color: $portlet-topper-border;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}
}

.portlet-options {
	display: inline-block;
}

.portlet-title-default {
	flex: 1 1 auto;
	line-height: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.portlet-title-menu {
	flex: 0 1 auto;

	> span > a {
		display: inline-block;
		text-decoration: none;
	}
}

.portlet-topper {
	background-color: $portlet-topper-bg;
	border-color: $portlet-topper-border;
	border-radius: $portlet-topper-border-radius;
	border-style: solid;
	border-width: $portlet-topper-border-width;
	color: $portlet-topper-color;
	display: box;
	display: flex;
	padding: 3px 12px 3px 24px;
	position: relative;

	.portlet > & {
		display: none;

		@include media-breakpoint-up(md) {
			display: flex;
			left: 0;
			opacity: 0;
			position: absolute;
			right: 0;

			@include transition(opacity 0.15s);

			top: 0;
		}
	}

	@include media-breakpoint-down(sm) {
		.controls-visible & {
			display: box;
			display: flex;
		}
	}
}

.portlet-topper-toolbar {
	margin: 0;
	padding-left: 0;

	> a,
	> span > a,
	.lfr-icon-menu > a {
		color: $portlet-topper-link-color;
	}

	> a {
		&:focus,
		&:hover {
			text-decoration: none;
		}
	}

	.controls-visible & {
		display: block;
	}
}