@import (reference) '../style/variables.less';

.adm-doc-device {
  display: flex;
  flex-direction: column;
  width: 375px;
  height: 100%;
  overflow: hidden;

  @media only screen and (max-width: 1440px) {
    width: 340px;
  }
  @media only screen and (max-width: 960px) {
    width: 300px;
  }

  &-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 22px;
  }

  &-action {
    height: 40px;
    background: #ffffff;
    border-top: 1px solid var(--doc-border-color);

    [data-prefers-color='dark'] & {
      background: #262626;
    }

    > a {
      padding: 0;
      margin-left: 12px;
      box-sizing: content-box;
      border: 2px solid transparent;
      transition: opacity 0.2s, background 0.2s;
      outline: none;
      cursor: pointer;
      color: #333;

      &:hover {
        opacity: 0.8;
      }

      &:active {
        opacity: 0.9;
      }

      &[role='refresh'] {
        background-position-x: -144px;
      }

      &[role='open-demo'] {
        background-position-x: -126px;
      }

      &[role='qrcode'] {
        position: relative;
        z-index: 1;
        background-position-x: -218px;

        > canvas {
          position: absolute;
          bottom: 120%;
          left: 50%;
          border: 4px solid #fff;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          box-sizing: content-box;
          transform: translateX(-50%) scale(0);
          transform-origin: center bottom;
        }

        &:hover > canvas,
        &:focus > canvas {
          transform: translateX(-50%) scale(1);
        }
      }

      [data-prefers-color='dark'] & {
        color: @c-text-dark;
      }
    }
  }

  > iframe {
    flex: 1;
    border: 0;
    border-top-right-radius: 12px;
    overflow: hidden;
  }
}
