docs-demo {
  display: block;
}

.docs-demo-device {
  --device-padding: 1rem;
  --device-width: 344px;
  --device-height: 704px;
  --device-frame-width: 12px;

  padding: var(--device-padding);
  /* position: sticky; */
  /* top: 0; */
}

.docs-demo-mode-toggle {
  align-items: center;
  display: flex;
  justify-content: center;

  margin: 1rem auto 0;

  width: 128px;
  height: 28px;

  background: #ecf0f5;

  border-radius: 18px;
}

.docs-demo-mode-toggle button {
  background-color: transparent;
  border: none;
  border-radius: 16px;

  color: #5b708b;

  cursor: pointer;
  font-family: var(--font-family);
  font-size: 11px;
  letter-spacing: -0.02em;
  width: calc(50% - 2px);
  line-height: 21px;
  padding-top: 2px;

  transition: 200ms background-color ease, 200ms color ease;
}

.docs-demo-mode-toggle button:focus,
.docs-demo-mode-toggle button:active {
  outline: none;
}

.docs-demo-mode-toggle button.is-selected {
  background-color: white;
  color: black;

  font-weight: 600;
  box-shadow: 0px 2px 3px rgba(0, 16, 46, 0.15);
}

.docs-demo-device > figure {
  margin: 0;

  background-size: contain;
  background-repeat: no-repeat;

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

  width: var(--device-width);
  height: var(--device-height);

  overflow: hidden;

  position: relative;

  z-index: 1;
}

.docs-demo-device > figure > iframe {
  position: absolute;

  top: 0;
  left: 0;

  margin: 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;
}

.docs-demo-device.ios figure {
  background-image: url('./iphone-device-skin.png');

  border-radius: 54px;
}

.docs-demo-device.ios > figure > iframe {
  border-radius: 38px;
}

.docs-demo-device.md figure {
  background-image: url('./android-device-skin.png');

  border-radius: 44px;
}

.docs-demo-device.md > figure > iframe {
  border-radius: 32px;
}

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

.docs-demo-device__ios-notch {
  display: none;
  fill: #090a0d;
  left: 50%;
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  width: 165px;
  z-index: 2;
}

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

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

.docs-demo-device.md .docs-demo-device__md-bar {
  display: block;
  fill: rgba(125, 125, 125, 0.3);
  padding: 0.5rem 2.2rem;
  position: relative;
  width: 100%;
  z-index: 2;
  top: 12px;
}

/*
 * View Source Button
 */

.docs-demo-source {
  align-items: center;
  display: flex;
  font-size: 13px;
  justify-content: center;
}

.docs-demo-source > ion-icon {
  margin-right: 5px;
}
/* 
@media (max-width: 1160px) {
  .docs-demo-device,
  .docs-demo-mode-toggle,
  .docs-demo-source {
    display: none;
  }
} */
