@use "../vars";

.codap-web-view-body {
  background-color: white;
  height: calc(100% - vars.$title-bar-height);
  overflow: hidden;
  position: relative;
  width: 100%;

  // The backdrop is displayed behind the iframe and is mostly used as a loading error message.
  .codap-web-view-backdrop {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    transform: rotate(-30deg) translateY(35%);
    width: 100%;

    .codap-web-view-url {
      color: white;
      font-size: x-large;
      text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    }

    .codap-web-view-message {
      color: gray;
      font-size: small;
      text-align: center;
    }
  }

  .codap-web-view-iframe-wrapper {
    height: 100%;
    position: absolute;
    width: 100%;

    .codap-web-view-iframe {
      height: 100%;
      width: 100%;
    }

    .codap-web-view-image {
      height: 100%;
      width: 100%;
      object-fit: contain;
      background-color: white;
    }
  }
}
