/**
 * MacBook Pro frame adapted from Devices.css v0.2.0.
 * MIT License, Copyright (c) 2017 Yan Zhu.
 * https://github.com/picturepan2/devices.css
 */

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device {
	aspect-ratio: 740 / 434;
	--flashblocks-wsp-frame-edge: #c8cacc;
	--flashblocks-wsp-frame-edge-light: #e4e5e6;
	--flashblocks-wsp-frame-panel: #0d0d0d;
	--flashblocks-wsp-frame-power: #e2e3e4;
	--flashblocks-wsp-frame-power-border: #9fa2a5;
	--flashblocks-wsp-frame-power-shadow: #6e7275;
	--flashblocks-wsp-frame-power-slot-shadow: #bcbec0;
	max-width: none;
	position: relative;
}

.flashblocks-wsp.has-frame-macbook.has-frame-color-spacegray .flashblocks-wsp__device,
.flashblocks-wsp.has-frame-macbook.has-frame-color-dark .flashblocks-wsp__device {
	--flashblocks-wsp-frame-edge: #767a7d;
	--flashblocks-wsp-frame-edge-light: #b7babc;
	--flashblocks-wsp-frame-panel: #0d0d0d;
	--flashblocks-wsp-frame-power: #83878a;
	--flashblocks-wsp-frame-power-border: #454749;
	--flashblocks-wsp-frame-power-shadow: #202121;
	--flashblocks-wsp-frame-power-slot-shadow: #6a6d70;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-frame {
	background: var(--flashblocks-wsp-frame-panel);
	border-radius: 3% / 5%;
	box-shadow: inset 0 0 0 max(1px, 0.22vw) var(--flashblocks-wsp-frame-edge);
	height: 96.313%;
	left: 8.243%;
	position: absolute;
	top: 0;
	width: 83.514%;
	z-index: 1;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-frame::after {
	background: linear-gradient(to bottom, #272727, var(--flashblocks-wsp-frame-panel));
	border-radius: 0 0 3% 3%;
	bottom: 0.478%;
	content: "";
	height: 5.742%;
	left: 0.324%;
	position: absolute;
	width: 99.353%;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-header {
	background: var(--flashblocks-wsp-frame-panel);
	border-bottom-left-radius: 7%;
	border-bottom-right-radius: 7%;
	height: 2.765%;
	left: 45.676%;
	position: absolute;
	top: 2.535%;
	width: 8.649%;
	z-index: 4;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-header::after,
.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-header::before {
	content: "";
	height: 33.333%;
	position: absolute;
	top: 0;
	width: 6.25%;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-header::after {
	background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, var(--flashblocks-wsp-frame-panel) 75%, var(--flashblocks-wsp-frame-panel) 100%);
	left: -6.25%;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-header::before {
	background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, var(--flashblocks-wsp-frame-panel) 75%, var(--flashblocks-wsp-frame-panel) 100%);
	right: -6.25%;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-power {
	background: radial-gradient(circle at center, var(--flashblocks-wsp-frame-power) 85%, var(--flashblocks-wsp-frame-edge) 100%);
	border: solid var(--flashblocks-wsp-frame-power-border);
	border-radius: 0.28% 0.28% 1.66% 1.66% / 8.33% 8.33% 50% 50%;
	border-width: max(1px, 0.11vw) max(1px, 0.22vw) 0;
	box-shadow: inset 0 -0.46vw 0.9vw 0 var(--flashblocks-wsp-frame-power-shadow);
	height: 5.53%;
	left: 0;
	position: absolute;
	top: 94.009%;
	width: 100%;
	z-index: 5;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-power::after {
	background: var(--flashblocks-wsp-frame-edge-light);
	border-radius: 0 0 8.333% 8.333% / 0 0 100% 100%;
	box-shadow: inset 0 0 0.45vw 0.2vw var(--flashblocks-wsp-frame-power-slot-shadow);
	content: "";
	height: 41.667%;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 16.216%;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__device-power::before {
	background: #272727;
	border-radius: 0 0 8% 8%;
	bottom: -8.333%;
	content: "";
	height: 8.333%;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 5.405%;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__viewport {
	border: max(1px, 0.22vw) solid #121212;
	border-radius: 1.35% 1.35% 0 0 / 2.3% 2.3% 0 0;
	height: 86.406%;
	left: 9.459%;
	position: absolute;
	top: 2.074%;
	width: 81.081%;
	z-index: 3;
}

.flashblocks-wsp.has-frame-macbook .flashblocks-wsp__content {
	background: var(--flashblocks-wsp-background-color, transparent);
}