.preview-console {
	width: 100%;
	height: 100%;
	background: $console-light-background-color;
	z-index: 1000;
	overflow: hidden;

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

	// assign styles to different types of console messages
	.preview-console__log {
		color: $dark-secondary-text-color;
	}

	.preview-console__error {
		color: $console-error-color;
	}

	.preview-console__warn {
		color: $console-warn-color;
	}
}

.preview-console__header {
	background-color: $console-header-background-color;
	color: $console-header-color;
	padding: #{5 / $base-font-size}rem;
	display: flex;
	justify-content: space-between;
}

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

.preview-console__messages {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	height: #{121 / $base-font-size}rem;

}

.preview-console__collapse {
	@extend %icon;
	.preview-console--collapsed & {
		display: none;
	}
}

.preview-console__expand {
	@extend %icon;
	display: none;
	.preview-console--collapsed & {
		display: inline-block;
	}
}