:host {
  display: block;

  height: 100%;

  pointer-events: none;
}

.demo-device {
  --device-frame-width: calc(var(--auto-size) / (344 / 12));
  --device-ios-border-radius: calc(var(--auto-size) / (344 / 54));
  --device-md-border-radius: calc(var(--auto-size) / (344 / 44));

  height: inherit;

  display: flex;
  justify-content: center;
  align-items: center;
}

.demo-device > figure {
  margin: 0;

  box-shadow: 0 2px 8px rgba(2, 8, 20, 0.1), 0 8px 16px rgba(2, 8, 20, 0.08);

  width: var(--auto-size);
  height: calc(var(--auto-size) * 704 / 304);

  overflow: hidden;

  position: relative;

  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.demo-device > figure > iframe,
.demo-device div.placeholder {
  position: absolute;

  top: 0;
  left: 0;

  margin: max(2px, var(--device-frame-width));

  width: calc(100% - var(--device-frame-width) * 2);
  height: calc(100% - var(--device-frame-width) * 2);

  border: none;

  overflow: hidden;

  -webkit-mask-image: -webkit-radial-gradient(white, black);

  z-index: 1;

  pointer-events: all;
}

.demo-device.ios figure,
.demo-device div.placeholder {
  border-radius: var(--device-ios-border-radius);
}

.demo-device div.placeholder {
  /**
   * @prop A background color for the content of the device until the frame is loaded
   * @default #323639
   */
  background: var(--deckgo-demo-placeholder-background, #323639);
}

.demo-device.md figure,
.demo-device.ios figure {
  background: black;
}

.demo-device.ios > figure > iframe,
.demo-device.ios div.placeholder {
  border-radius: calc(var(--device-ios-border-radius) * 38 / 54);
}

.demo-device.md figure {
  border-radius: var(--device-md-border-radius);
}

.demo-device.md > figure > iframe,
.demo-device.md div.placeholder {
  border-radius: calc(var(--device-md-border-radius) * 32 / 44);
}

.demo-device.ios figure:after {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  bottom: calc(var(--auto-size) / (344 / 18));
  content: "";
  display: none;
  height: 4px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 35%;
  z-index: 1;
}

.demo-device__ios-notch {
  display: none;
  fill: #090a0d;
  padding-top: calc(var(--device-frame-width) - 4px);
  width: calc(var(--auto-size) / 2);
  z-index: 2;
}

.demo-device.ios .demo-device__ios-notch,
.demo-device.ios figure:after {
  display: block;
}

.demo-device__md-bar {
  display: none;
}

.demo-device.md .demo-device__md-bar {
  display: block;
  fill: rgba(125, 125, 125, 0.3);
  padding: var(--device-frame-width) calc(var(--device-frame-width) * 3);
  position: relative;
  width: 100%;
  z-index: 2;
  top: 12px;
}
