.preview-console {
	@include themify() {
		background: getThemifyVariable('console-background-color');
		border-color: getThemifyVariable('ide-border-color');
	}
	border-left: 1px solid;
	border-right: 1px solid;
	width: 100%;
	height: 100%;
	z-index: 1000;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	& > {
		position:relative;
		text-align:left;
	}

	// assign styles to different types of console messages
	.preview-console__log {
		@include themify(){
			color: getThemifyVariable('secondary-text-color');
		}
		flex: 1 0 auto;
	}

	.preview-console__undefined {
		@include themify(){
			color: getThemifyVariable('inactive-text-color');
		}
		flex: 1 0 auto;
	}

	.preview-console__error {
		color: $console-error-color;
		flex: 1 0 auto;
	}

	.preview-console__warn {
		color: $console-warn-color;
		flex: 1 0 auto;
	}
}

.preview-console__header {
	@include themify() {
		background-color: getThemifyVariable('console-header-background-color');
		color: getThemifyVariable('console-header-color');
	}
	min-height: #{30 / $base-font-size}rem;
	padding: #{5 / $base-font-size}rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.preview-console__header-title {
	font-size: #{12 / $base-font-size}rem;
	font-weight: normal;
}

.preview-console__icon {
	padding-right: #{20 / $base-font-size}rem;
}

.preview-console__messages {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.preview-console__collapse {
	padding-top: #{3 / $base-font-size}rem;
	@include icon();
	.preview-console--collapsed & {
		display: none;
	}
}

.preview-console__expand {
	padding-top: #{3 / $base-font-size}rem;
	@include icon();
	display: none;
	.preview-console--collapsed & {
		display: inline-block;
	}
}

.preview-console__header-buttons {
	display: flex;
	align-items: center;
}

.preview-console__clear {
	@include themify() {
		@extend %link;
	}
	background: transparent;
	border: none;
	padding-right: #{10 / $base-font-size}rem;
	.preview-console--collapsed & {
		display: none;
	}
}