$prefix: codeDisplay;

$devices-width: 375px;
$min-height: 700px;
$iframeHeight: calc(100% - 40px);

@keyframes pulse {
  50% {
      opacity: .5
  }
}


.#{$prefix} {
  height: $min-height;
  margin: 0;
  border-radius: var(--ifm-code-border-radius);

  &:not(:last-child) {
    margin-bottom: var(--ifm-leading);
  }

  :global {
    .col {
      padding: 0;
      overflow: auto;
    }
  }

  &Block {
    min-height: 100%;
    margin-bottom: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    > div:last-child > pre {
      height: 650px;
    }
  }

  &Devices {
    max-width: $devices-width;
    width: $devices-width;
    height: $min-height;
    border-top-right-radius: var(--ifm-code-border-radius);
    border-bottom-right-radius: var(--ifm-code-border-radius);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ifm-color-emphasis-300);

    &Loading {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: $iframeHeight;
        background: rgba(white, .8) url(/img/hook.png) center center / 64px no-repeat;
        animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
      }
    }
  }

  &Frame {
    width: 100%;
    margin: 0;
    height: $iframeHeight;
    border-top-right-radius: var(--ifm-code-border-radius);

    &::-webkit-scrollbar {
      display: none;
    }

    &Action {
      margin: 0;
      padding: 0;
      height: 40px;
      border-top: 1px solid var(--ifm-color-emphasis-300);
      background: white;
      border-bottom-right-radius: var(--ifm-code-border-radius);
      align-items: center;
      justify-content: flex-end;
      padding: 0 var(--ifm-spacing-horizontal);

      > a {
        cursor: pointer;
        display: inline-flex;
        margin-left: var(--ifm-spacing-horizontal);
      }

      &QR {
        display: block;
        width: 48px;
        height: 48px;
        margin: 0 auto;
      }
    }
  }
}

@media screen and (max-width: 996px) {
  .#{$prefix} {
    height: $min-height * 2;

    &Block {
      border-top-right-radius: var(--ifm-code-border-radius);
      border-bottom-left-radius: 0;
    }

    &Devices {
      width: 100%;
      max-width: 100%;
      border-top-right-radius: 0;
      border-bottom-left-radius: var(--ifm-code-border-radius);
    }
  }
}
