/* 2d renderings css */

.img-fluid {
  max-height: 100%;
  max-width: 100%;
}

.rendering-image-height {
  max-height: calc(100vh - 20rem);
}

.rendering-rotated-height {
  max-height: calc(100vh - 20rem);
}

.rendering-height {
  max-height: calc(100vh - 15rem);
  max-width: 100%;
}

.do-not-touch {
  -webkit-touch-callout: none;
  pointer-events: none;
  user-select: none;
}

.rendering-dimensions {
  width: 100%;
  height: 100%;
  max-width: 600px;
}

@media (min-width: 768px) {
  .rendering-rotated-height {
    max-height: calc(100vh - 25rem);
  }
}

.figure-container {
  perspective: 1000px;
  position: relative;
}

.figure-container .img-fluid {
  height: auto;
  max-width: 100%;
}

.figure-container figure {
  display: block;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}

.figure-container .after {
  content: unset;
}

.figure-container.type-metal {
  margin-top: 40px;
  margin-bottom: 40px;
  left: 30px;
}

.figure-container.type-canvas {
  margin-top: 40px;
  margin-bottom: 40px;
  left: 48px;
}

.type-canvas img {
  box-shadow: 20px 18px 25px -13px rgb(10 10 10 / 50%);
}

.figure-container.type-canvas figure {
  background: no-repeat;
  display: inline-block;
  transform: rotateX(80deg);
  transform: rotateY(30deg);
  transform-origin: left;
  transform-style: preserve-3d;
}

.figure-container.type-canvas .after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transform: rotateY(290deg) scaleX(-1);
  transform-origin: left;
}

.figure-container.type-framed-canvas figure,
.figure-container.type-framed figure {
  background-position: center;
  border-image-repeat: stretch;
  border-image-slice: 47;
  border-image-width: 1.5rem;
  border-style: solid;
  border-width: 1.5rem;
  box-shadow: 15px 15px 40px -5px rgb(0 0 0 / 50%);
  box-sizing: border-box;
  margin: auto;
  position: relative;
}

.type-metal figure {
  background-size: cover !important;
  display: block;
  transform: rotateX(80deg);
  transform: rotateY(30deg);
  transform-origin: left;
  transform-style: preserve-3d;
}

.type-metal img {
  box-shadow: 16px 17px 25px -13px rgb(10 10 10 / 50%);
}

.figure-container.type-metal figure::after {
  background: white;
  border: 1px solid #ccc;
  border-right: 8px solid #ccc;
  content: "";
  height: 100%;
  left: -6px;
  position: absolute;
  top: 0;
  transform: rotateX(90deg);
  transform: rotateY(290deg);
  transform-origin: right;
  width: 7px;
}

/* Custom frame css */

.frame-img-border {
  border-style: solid;
  border-color: #eee;
  border-radius: 1px;
}

.frame-mat {
  background-color: rgb(248 248 255);
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 50%) inset;
}

.frame-img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: solid 2px;
  border-bottom-color: #ffe;
  border-left-color: #eed;
  border-right-color: #eed;
  border-top-color: #ccb;
}

.collections-frame {
  border-width: 8px;
  padding: 0%;
  box-sizing: border-box;
  position: relative;
}

@media (min-width: 768px) {
  .collections-frame {
    border-width: 14px;
    padding: 0%;
    box-sizing: border-box;
    position: relative;
  }
}

.collections-list-dropdown {
  right: 0;
  z-index: 10;
  background: #f5f6f8;
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  border-radius: 4px;
}

.black-frame {
  border-bottom-color: #080808;
  border-left-color: #181818;
  border-right-color: #181818;
  border-top-color: #080808;
  background: #181818;
  box-shadow: 0 0 5px 5px rgb(243 243 243 / 25%) inset, 0 4px 10px 4px rgb(0 0 0 / 25%);
}

.white-frame {
  border-bottom-color: #f8f8f8;
  border-left-color: #f5f5f5;
  border-right-color: #f5f5f5;
  border-top-color: #f8f8f8;
  background: #f8f8f8;
  box-shadow: 0 0 5px 5px rgb(195 192 192 / 25%) inset, 0 4px 10px 4px rgb(0 0 0 / 25%);
}

.natural-frame {
  border-bottom-color: #d9bf92;
  border-left-color: #d9b98c;
  border-right-color: #d9b98c;
  border-top-color: #d9bf92;
  background: #d9bf92;
  box-shadow: 0 0 5px 5px rgb(243 243 243 / 25%) inset, 0 4px 10px 4px rgb(0 0 0 / 25%);
}

/* asset downloads */

.asset-download-frame {
  border-width: 12px;
  padding: 0%;
  box-sizing: border-box;
  position: relative;
}

.asset-download-visible-frame {
  border-width: 8px;
  padding: 0%;
  box-sizing: border-box;
  position: relative;
}

.asset-download-container {
  max-width: 720px;
  max-height: calc(100vh - 18rem);
  aspect-ratio: 9 / 16;
}

.asset-download-visible-container {
  width: 240px;
  height: 426px;
}

.asset-download-image {
  max-width: 550px;
  max-height: 1000px;
}

.asset-download-visible-image {
  width: inherit;
  max-width: 183px;
  max-height: 333px;
}

.frame-mat-asset {
  padding: 6%;
  width: 100%;
  background-color: rgb(248 248 255);
  box-shadow: 0 0 20px 0 gray inset;
}

.mockups-main > div {
  background-color: rgb(255 255 255);
  box-shadow: 0 2.63278px 7.02075px rgb(0 0 0 / 10%);
  border: 1px solid #e5e5e5;
}

div.asset-frame,
div.asset-frame *,
div.asset-frame::before,
div.asset-frame::after {
  border: 0;
}

.printable-mockup {
  --percent-of-largest-edge: 40;
  --aspect-ratio-width: 9;
  --aspect-ratio-height: 16;

  height: calc(1vw * (var(--percent-of-largest-edge) * (var(--aspect-ratio-height) / var(--aspect-ratio-width))));
  width: calc(1vw * var(--percent-of-largest-edge));
}

@media (min-aspect-ratio: 9/16) {
  /* Flip the calculation if the screen is above 16:9 */
  .printable-mockup {
    --percent-of-largest-edge: 50;

    height: calc(1vh * var(--percent-of-largest-edge));
    width: calc(1vh * (var(--percent-of-largest-edge) * (var(--aspect-ratio-width) / var(--aspect-ratio-height))));
  }
}

.mockup-image {
  --percent-of-largest-edge: 35;
  --aspect-ratio-width: 9;
  --aspect-ratio-height: 16;

  max-height: calc(1vw * (var(--percent-of-largest-edge) * (var(--aspect-ratio-height) / var(--aspect-ratio-width))));
}

@media (min-aspect-ratio: 9/16) {
  /* Flip the calculation if the screen is above 16:9 */
  .mockup-image {
    --percent-of-largest-edge: 40;

    max-height: calc(1vh * var(--percent-of-largest-edge));
  }
}