html, body, .container {
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: Helvetica, sans-serif;
}

* {
	box-sizing: border-box;
	transition: color 0.2s ease-in-out,
		background-color 0.2s ease-in-out,
		background-image 0.2s ease-in-out;
}

.container {
	display: block;
	overflow: hidden;
}

.topBar {
	display: flex;
	height: 68px;
	background-color: #fdfdfd;
	position: relative;
	transition: height 0.5s ease-in-out;
}

.toolbar {
	display: flex;
	z-index: 10;
	width: 100%;
	align-items: center;
	box-shadow: 0 0 5px 0 rgb(0 0 0 / 21%);
	background-color: #fdfdfd;
	transition: transform 0.5s ease-in-out, background-color 0.2s ease-in-out;
}

.toolbar-title {
	display: flex;
	flex: 1;
	justify-content: center;
}

.toolbar-title span {
	font-size: 10px;
	font-weight: bold;
	color: #0079ff;
	text-transform: uppercase;
}

[dark] .toolbar-title span {
	color: #ffffff;
}

.toolbar-buttons {
	display: flex;
	flex-direction: row;
	flex: 1;
}

.toolbar-buttons.left {
	justify-content: flex-start;
}
.toolbar-buttons.right {
	justify-content: flex-end;
}

.toolbar-device-group {
	display: flex;
	flex-direction: column;
	margin-right: 13px;
}

.toolbar-buttons-fullscreen {
	margin-left: 16px;
	margin-right: 0;
}

.toolbar-device-space {
	flex-grow: 1;
}

.toolbar-device-buttons {
	display: flex;
	justify-content: space-between;
	width: 76px;
	height: 36px;
}

.toolbar-device-buttons-button {
	width: 36px;
	height: 36px;
	border-radius: 3px;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.toolbar-device-buttons-button:hover,
.theme-button:hover {
  background-color: #e2f0ff;
}

[dark] .toolbar-device-buttons-button,
[dark] .theme-button:hover {
  background-color: #383838;
}

[dark] .toolbar-device-buttons-button:hover,
[dark] .theme-button:hover:hover {
  background-color: #636262;
}

[previewType="fullscreen"] .toolbar-buttons-fullscreen-button,
[previewType="desktop"] .toolbar-buttons-desktop-button,
[previewType="tabletPortrait"] .toolbar-buttons-tablet-portrait,
[previewType="tabletLandscape"] .toolbar-buttons-tablet-landscape,
[previewType="smartphonePortrait"] .toolbar-buttons-smartphone-portrait,
[previewType="smartphoneLandscape"] .toolbar-buttons-smartphone-landscape {
	background-color: #0079ff!important;
	cursor: default;
}

.toolbar-device-buttons-button-icon {
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-position: center;
}

.toolbar-buttons-fullscreen-icon {
	width: 28px;
	height: 18px;
	background-image: url(icons/fullscreen-light.svg);
}

[dark] .toolbar-buttons-fullscreen-icon {
  background-image: url(icons/fullscreen-dark.svg);
}

[previewType="fullscreen"] .toolbar-buttons-fullscreen-icon {
	background-image: url(icons/fullscreen-active.svg);
}

.toolbar-buttons-desktop-icon {
	width: 28px;
	height: 18px;
	background-image: url(icons/desktop-light.svg);
}

[dark] .toolbar-buttons-desktop-icon {
  background-image: url(icons/desktop-dark.svg);
}

[previewType="desktop"] .toolbar-buttons-desktop-icon {
	background-image: url(icons/desktop-active.svg);
}

.toolbar-buttons-tablet-portrait-icon {
	background-image: url(icons/tablet-portrait-light.svg);
}

[dark] .toolbar-buttons-tablet-portrait-icon {
	background-image: url(icons/tablet-portrait-dark.svg);
}

[previewType="tabletPortrait"] .toolbar-buttons-tablet-portrait-icon {
	background-image: url(icons/tablet-portrait-active.svg);
}

.toolbar-buttons-tablet-landscape-icon {
	background-image: url(icons/tablet-landscape-light.svg);
}

[dark] .toolbar-buttons-tablet-landscape-icon {
	background-image: url(icons/tablet-landscape-dark.svg);
}

[previewType="tabletLandscape"] .toolbar-buttons-tablet-landscape-icon {
	background-image: url(icons/tablet-landscape-active.svg);
}

.toolbar-buttons-smartphone-portrait-icon {
	background-image: url(icons/smartphone-portrait-light.svg);
}

[dark] .toolbar-buttons-smartphone-portrait-icon {
	background-image: url(icons/smartphone-portrait-dark.svg);
}

[previewType="smartphonePortrait"] .toolbar-buttons-smartphone-portrait-icon {
	background-image: url(icons/smartphone-portrait-active.svg);
}

.toolbar-buttons-smartphone-landscape-icon {
	background-image: url(icons/smartphone-landscape-light.svg);
}

[dark] .toolbar-buttons-smartphone-landscape-icon {
	background-image: url(icons/smartphone-landscape-dark.svg);
}

[previewType="smartphoneLandscape"] .toolbar-buttons-smartphone-landscape-icon {
	background-image: url(icons/smartphone-landscape-active.svg);
}

.toolbar-text {
	font-size: 9px;
	color: #4a4a4a;
	margin-top: 6px;
	text-align: center;
}

[dark] .toolbar-text {
	color: #ffffff;
}

[previewType="fullscreen"] .toolbar-buttons-fullscreen-text,
[previewType="desktop"] .toolbar-buttons-desktop-text,
[previewType="tabletPortrait"] .toolbar-buttons-tablet-text,
[previewType="tabletLandscape"] .toolbar-buttons-tablet-text,
[previewType="smartphonePortrait"] .toolbar-buttons-smartphone-text,
[previewType="smartphoneLandscape"] .toolbar-buttons-smartphone-text {
	color: #0079ff;
}

.toolbar-buttons-theme-button {
	width: 66px;
	height: 36px;
	border-radius: 3px;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
	overflow: hidden;
	display: flex;
}

.theme-button {
	width: 50%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
}

.toolbar-buttons-theme-button-light {
	background-color: #0079ff!important;
	cursor: default;
}

[dark] .toolbar-buttons-theme-button-light {
	background-color: #383838!important;
	cursor: pointer;
}

[dark] .toolbar-buttons-theme-button-light:hover {
	background-color: #636262!important;
}

.toolbar-buttons-theme-button-dark {
	cursor: pointer;
}

[dark] .toolbar-buttons-theme-button-dark {
	background-color: #0079ff !important;
	cursor: default;
}

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

.toolbar-buttons-theme-button-light-icon {
	background-image: url(icons/theme-light-light.svg);
}

[dark] .toolbar-buttons-theme-button-light-icon {
	background-image: url(icons/theme-light-dark.svg);
}

.toolbar-buttons-theme-button-dark-icon {
	background-image: url(icons/theme-dark-light.svg);
}

[dark] .toolbar-buttons-theme-button-dark-icon {
	background-image: url(icons/theme-dark-dark.svg);
}

.toolbar-buttons-theme-textLight,
[dark] .toolbar-buttons-theme-textDark {
  display: inline-block;
}

.toolbar-buttons-theme-textDark,
[dark] .toolbar-buttons-theme-textLight {
  display: none;
}

.toolbar-buttons-minimize {
	margin-right: 16px;
	cursor: pointer;
}

.toolbar-buttons-minimize-button {
	width: 34px;
	height: 34px;
	border-radius: 17px;
}

.toolbar-buttons-minimize-button-icon {
	background-image: url(icons/minimize-light.svg);
	width: 10px;
	height: 10px;
}

[dark] .toolbar-buttons-minimize-button-icon {
	background-image: url(icons/minimize-dark.svg);
}

.toolbar-buttons-minimize-text {
	margin-top: 8px;
}

.expand {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	background-color: #0079ff;
	margin-left: auto;
	align-items: center;
	justify-content: space-between;
	width: 149px;
	height: 32px;
	padding-left: 12px;
	padding-right: 12px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.26);
	cursor: pointer;
}

.expand-text {
	font-size: 10px;
	color: #ffffff;
}

.expand-text-title {
	font-weight: bold;
}

[previewType="fullscreen"] .expand-text-fullscreen,
[previewType="desktop"] .expand-text-desktop,
[previewType="tabletPortrait"] .expand-text-tablet,
[previewType="tabletLandscape"] .expand-text-tablet,
[previewType="smartphonePortrait"] .expand-text-smartphone,
[previewType="smartphoneLandscape"] .expand-text-smartphone {
	display: inline-block;
}

[previewType="fullscreen"] .expand-text-desktop,
[previewType="fullscreen"] .expand-text-tablet,
[previewType="fullscreen"] .expand-text-smartphone,
[previewType="desktop"] .expand-text-fullscreen,
[previewType="desktop"] .expand-text-tablet,
[previewType="desktop"] .expand-text-smartphone,
[previewType="tabletPortrait"] .expand-text-fullscreen,
[previewType="tabletPortrait"] .expand-text-desktop,
[previewType="tabletPortrait"] .expand-text-smartphone,
[previewType="tabletLandscape"] .expand-text-fullscreen,
[previewType="tabletLandscape"] .expand-text-desktop,
[previewType="tabletLandscape"] .expand-text-smartphone,
[previewType="smartphonePortrait"] .expand-text-fullscreen,
[previewType="smartphonePortrait"] .expand-text-desktop,
[previewType="smartphonePortrait"] .expand-text-tablet,
[previewType="smartphoneLandscape"] .expand-text-fullscreen,
[previewType="smartphoneLandscape"] .expand-text-desktop,
[previewType="smartphoneLandscape"] .expand-text-tablet {
	display: none;
}

.expand-icon {
	width: 20px;
	height: 20px;
	background-image: url(icons/expand.svg);
}

.preview {
	display: block;
	height: calc(100% - 68px);
	background-color: #ffffff;
	overflow: hidden;
	z-index: 1;
	position: relative;
}

.iframe {
	transform-origin: top left;
	border: none;
	background-color: #ffffff;
	transition: transform 0.2s ease-in-out,
		width 0.2s ease-in-out,
		height 0.2s ease-in-out,
		margin 0.2s ease-in-out;
}

[minimized] .topBar {
	height: 32px;
}

[minimized] .toolbar {
	transform: translateY(-70px);
}

[minimized] .preview {
	height: calc(100% - 32px);
}

[dark] .topBar,
[dark] .toolbar {
	background-color: #1e1e1e;
}

[dark] .expand {
	background-color: #383838;
}

body[dark],
[dark][minimized] .topBar,
[dark] .preview {
	background-color: #151515;
}