/*! Formir - Room Gallery v1.4.7-dev by @konrad-k - https://formir.io/room-gallery/ * All rights reserved - Copyright © 2024 */

// SETUP

/// CLASSES
$room: room-gallery; // main wrapper
$room-dark: room-dark;
$room-dark-auto: room-dark-auto;
$room-body: room-body; // body of room
$room-wrapper: room-wrapper; // body of room
$room-arena: room-arena; // next wrapper coled arena
$room-walls: room-walls; // walls in 3d
$room-wall: room-wall;
$room-wall-active: wall-active;
$room-ceil: room-ceil;
$room-floor: room-floor;
$room-item: room-item; // item to display on the wall
$room-item-active: item-active;
$room-item-image: item-image; // image container
$room-item-video: item-video; // video container
$room-item-desc: item-desc; // image drescription
$room-zoom: room-zoom; // zoom control input
$room-paginations: room-paginations; // pagination wrapper
$room-paginations-thumbs: room-paginations-thumbs;
$room-navigations: room-navigations;
$room-prev-button: room-prev;
$room-next-button: room-next;
$room-icon: room-icon;
$room-zoom-button: room-zoom-btn; // button to zoom in
$room-dark-button: room-dark-btn;
$room-exit-button: room-exit-btn; // button to live zoom
$room-canvas: room-canvas; // class for border/canvas style


/// SASS CORE VARIABLES - editable in SASS
$room-size-width: var(--room-width, 100dvmax);
$room-size-height: var(--room-height, 100dvmin);

$room-mobile-media-width: 945px; // not use % unit or calc(), you can use px, rem, cm, vh, vw etc
$room-mobile-size-width: var(--room-mobile-width, 100dvw); // not use % unit or calc(), you can use px, rem, cm, vh, vw etc - recommend 100vw
$room-mobile-size-height: var(--room-mobile-height, 100dvh); // recomment 100vh

// CSS VAR VARIABLES - editable in JS
$room-rotate-speed: var(--room-rotate-speed, 2s);
$room-rotate-timing: var(--room-rotate-timing, ease-in-out);

$room-font-family: var(--room-font-family, Arial);

$room-perspective: $room-size-width;
$room-mobile-perspective: $room-mobile-size-width;


$room-scale: var(--room-scale, 1.1);
$room-scale-zoom: var(--room-scale-zoom, 1.5);
$room-offset-y: var(--room-offset, 0); // use %

$room-item-height: var(--room-item-height, 90%);
$room-item-width: var(--room-item-width, 90%);

$room-zindex: var(--room-zindex, 1000);

$room-icon-blend-mode: var(--room-icon-blend-mode, difference);

$room-text-font-size: var(--room-text-font-size, 14px);
$room-text-font-size-mobile: var(--room-text-font-size-mobile, 2vmin);
$room-font-line-height: var(--room-font-line-height, 1.3em);
$room-text-margin-top: var(--room-text-margin-top, 1.5rem);
$room-text-max-height: var(--room-text-max-height, 20%);
$room-text-min-height: var(--room-text-min-height, 15%);
$room-text-max-width: var(--room-text-max-width, 70%);
$room-text-padding: var(--room-text-padding, 20px 0);
$room-navigations-margin: var(--room-navigations-margin, 20px);
$room-button-size: var(--room-button-size, 35px);
$room-pagination-button-size: var(--room-pagination-button-size, 25px);
$room-pagination-buttons-space: var(--room-pagination-buttons-space, 7px);
$room-pagination-buttons-border-radius: var(--room-pagination-buttons-border-radius, $room-button-size);
$room-pagination-thumbs-max-height: var(--room-pagination-thumbs-max-height, 15%);
$room-pagination-thumb-max-width: var(--room-pagination-thumb-max-width, 100px);
$room-nav-button-size: var(--room-nav-button-size, 35px);
$room-buttons-position: var(--room-buttons-position, 5%);
$room-button-zoom-position: var(--room-button-zoom-position, 10%);
$room-button-dark-position: var(--room-button-dark-position, 10%);
$room-button-zoom-width: var(--room-button-zoom-width, 35px);
$room-button-exit-width: var(--room-button-exit-width, 35px);
$room-button-dark-width: var(--room-button-dark-width, 35px);
$room-pagination-position: var(--room-pagination-position, 5%);
$room-button-transition: var(--room-button-transition, opacity 0.5s linear);
$room-button-opacity: var(--room-button-opacity, 1);

$room-background-blend-mode: var(--room-background-blend-mode);
$room-body-background: var(--room-body-background);
$room-text-color: var(--room-text-color);
$room-link-color: var(--room-link-color);
$room-floor-background: var(--room-floor-background);
$room-floor-shadow: var(--room-floor-shadow);
$room-wall-background: var(--room-wall-background);
$room-wall-shadow: var(--room-wall-shadow);
$room-ceil-background: var(--room-ceil-background);
$room-ceil-shadow: var(--room-ceil-shadow);
$room-button-background: var(--room-button-background);
$room-button-color: var(--room-button-color);
$room-button-border: var(--room-button-border);
$room-button-shadow: var(--room-button-shadow);
$room-button-current-background: var(--room-button-current-background);
$room-button-current-border: var(--room-button-current-border);
$room-button-current-color: var(--room-button-current-color);
$room-button-current-shadow: var(--room-button-current-shadow);
$room-icon-color: var(--room-icon-color);
$room-canvas-border: var(--room-canvas-border);
$room-canvas-shadow: var(--room-canvas-shadow);

// Light theme:
$room-light-background-blend-mode: var(--room-light-background-blend-mode, multiply);
$room-light-body-background: var(--room-light-body-background, #fff);
$room-light-text-color: var(--room-light-text-color, #2d2d2d);
$room-light-link-color: var(--room-light-link-color, #2d2d2d);
$room-light-floor-background: var(--room-light-floor-background, #21262c url('./../img/floor.png') repeat 400px 600px);
$room-light-floor-shadow: var(--room-light-floor-shadow, 0 0 100px rgba(0, 0, 0, 0.1), 0 0 150px rgba(0, 0, 0, 0.2) inset);
$room-light-wall-background: var(--room-light-wall-background, #fff url('./../img/wall.png') repeat 30px 30px);
$room-light-wall-shadow: var(--room-light-wall-shadow, 0 0 50px rgba(0, 0, 0, 0.1), 0 0 100px rgba(0, 0, 0, 0.2) inset);
$room-light-ceil-background: var(--room-light-ceil-background, #fff url('./../img/wall.png') repeat 30px 30px);
$room-light-ceil-shadow: var(--room-light-ceil-shadow, 0 0 100px rgba(0, 0, 0, 0.1), 0 0 150px rgba(0, 0, 0, 0.2) inset);
$room-light-button-background: var(--room-light-button-background, #3c3642);
$room-light-button-color: var(--room-light-button-color, #fff);
$room-light-button-border: var(--room-light-button-border, 0 none);
$room-light-button-shadow: var(--room-light-button-shadow, 0 0 2px rgba(0, 0, 0, 0.5));
$room-light-button-current-background: var(--room-light-button-current-background, #fff);
$room-light-button-current-border: var(--room-light-button-current-border, 0 none);
$room-light-button-current-color: var(--room-light-button-current-color, #3c3642);
$room-light-button-current-shadow: var(--room-light-button-current-shadow, none);
$room-light-icon-color: var(--room-light-icon-color, #fff);
$room-light-canvas-border: var(--room-light-canvas-border, 10px solid #3c3642);
$room-light-canvas-shadow: var(--room-light-canvas-shadow, 1px 1px 3px rgba(0, 0, 0, 0.5));

// Dark theme:
$room-dark-background-blend-mode: var(--room-dark-background-blend-mode, screen);
$room-dark-body-background: var(--room-dark-body-background, #1c1e24);
$room-dark-text-color: var(--room-dark-text-color, #fff);
$room-dark-link-color: var(--room-dark-link-color, #fff);
$room-dark-floor-background: var(--room-dark-floor-background, #241c11 url('./../img/dark-floor.jpg') repeat 150px 150px);
$room-dark-floor-shadow: var(--room-dark-floor-shadow, none);
$room-dark-wall-background: var(--room-dark-wall-background, #1c1e24 url('./../img/dark-wall.jpg') repeat 150px 150px);
$room-dark-wall-shadow: var(--room-dark-wall-shadow, 0 0 50px rgba(0, 0, 0, 0.7), 0 0 100px rgba(0, 0, 0, 0.7) inset);
$room-dark-ceil-background: var(--room-dark-ceil-background, #1c1e24 url('./../img/dark-wall.jpg') repeat 150px 150px);
$room-dark-ceil-shadow: var(--room-dark-ceil-shadow, 0 0 100px rgba(0, 0, 0, 0.7), 0 0 150px rgba(0, 0, 0, 0.7) inset);
$room-dark-button-background: var(--room-dark-button-background, #fff);
$room-dark-button-color: var(--room-dark-button-color, #000);
$room-dark-button-border: var(--room-dark-button-border, 0 none);
$room-dark-button-shadow: var(--room-dark-button-shadow, 0 0 2px rgba(0, 0, 0, 0.5));
$room-dark-button-current-background: var(--room-dark-button-current-background, #000);
$room-dark-button-current-border: var(--room-dark-button-current-border, 0 none);
$room-dark-button-current-color: var(--room-dark-button-current-color, #fff);
$room-dark-button-current-shadow: var(--room-dark-button-current-shadow, 0 0 5px 5px rgba(255, 255, 255, 0.3));
$room-dark-icon-color: var(--room-dark-icon-color, #fff);
$room-dark-canvas-border: var(--room-dark-canvas-border, 10px solid $room-button-background);
$room-dark-canvas-shadow: var(--room-dark-canvas-shadow, 0 0 10px rgba(255, 255, 255, 0.1));

// ROOM GALLERY

/// MIXING that you can modify - buttons, but be careful

@mixin room-floor() {
  background: $room-floor-background;
  background-blend-mode: $room-background-blend-mode;
  background-repeat: repeat;
}

@mixin room-wall() {
  background: $room-wall-background;
  background-blend-mode: $room-background-blend-mode;
}

@mixin room-ceil() {
  background: $room-ceil-background;
  background-blend-mode: $room-background-blend-mode;
}

@mixin room-item-desc() {
  font-size: 1.3rem;

  p {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  :any-link {
    color: $room-text-color;
    text-decoration: underline;
  }

  span {
    font-size: 1.1rem;
  }
}

@mixin room-pagination-current() {
  &.#{room-icon} {
    text-shadow: $room-button-current-shadow;
    color: $room-button-current-color;
  }

  &:not(.#{room-icon}) {
    border: $room-button-current-border;
    background-color: $room-button-current-background;
    box-shadow: $room-button-current-shadow;
    color: $room-button-current-color;
  }
}

@mixin room-button-icon() {
  height: auto;
  width: 60%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

@mixin room-button($size: $room-button-size) {
  height: $size;
  min-width: calc($size - ($size / 1.5));
  padding: 0 calc($size / 1.5 / 2);
  color: $room-button-color;
  line-height: $size;
  font-size: calc($size / 2.5);
  border: $room-button-border;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  box-sizing: content-box;

  &:not(.#{room-icon}) {
    background: $room-button-background;

    &.active {
      color: $room-button-background;
      background-color: $room-button-color;
    }
  }

  &.#{room-icon} {
    background: none;

    &:not(.active) {
      color: $room-icon-color;
    }

    &.active {
      color: $room-button-background;
    }
  }

  &:hover {
    text-decoration: none;
  }
}

@mixin room-prev-button($size: $room-button-size) {
  display: block;
  left: $room-buttons-position;
  right: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  font-weight: bold;
  border: 0 none;
  width: $room-nav-button-size;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;

  &:not(.#{room-icon}) {
    height: $room-nav-button-size;
    transform: rotate(-45deg);
    border-radius: 0 $size $size $size;

    span {
      transform: rotate(45deg);
      display: inline-block;
    }
  }

  &.#{room-icon} {
    color: $room-button-color;
  }
}

@mixin room-next-button($size: $room-button-size) {
  display: block;
  right: $room-buttons-position;
  left: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  font-weight: bold;
  border: 0 none;
  width: $room-nav-button-size;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;

  &:not(.#{room-icon}) {
    height: $room-nav-button-size;
    border-radius: $size 0 $size $size;
    transform: rotate(45deg);

    span {
      transform: rotate(-45deg);
      display: inline-block;
    }
  }

  &.#{room-icon} {
    color: $room-button-color;
  }
}

@mixin room-exit-button() {
  font-size: $room-text-font-size;
  color: $room-button-color;
  width: $room-button-exit-width;
  height: $room-button-size;
  line-height: $room-button-size;
  padding: 0;
  top: $room-button-zoom-position;
  text-align: center;
  cursor: pointer;
  opacity: $room-button-opacity;
  will-change: opacity;
  border: 0 none;

  &:not(.#{room-icon}) {
    background-color: $room-button-background;
    border-radius: $room-button-size;
    box-shadow: $room-button-shadow;

    svg,
    img {
      @include room-button-icon;
    }
  }

  &.#{room-icon} {
    background: none;
    mix-blend-mode: $room-icon-blend-mode;
    color: $room-icon-color;
  }

  &:hover {
    opacity: 1;
    transition: $room-button-transition;
  }
}

@mixin room-zoom-button() {
  right: 0;
  left: 0;
  font-size: $room-text-font-size;
  color: $room-button-color;
  top: $room-button-zoom-position;
  height: $room-button-size;
  line-height: $room-button-size;
  border: 0;
  padding: 0;
  width: $room-button-zoom-width;
  text-align: center;
  cursor: pointer;
  will-change: opacity;
  transition: $room-button-transition;

  &:not(.#{room-icon}) {
    background-color: $room-button-background;
    border-radius: $room-button-size;
    box-shadow: $room-button-shadow;

    svg,
    img {
      @include room-button-icon;
    }
  }

  &.#{room-icon} {
    background: none;
    mix-blend-mode: $room-icon-blend-mode;
    color: $room-icon-color;
  }

  &:hover {
    opacity: 1;
    transition: $room-button-transition;
  }
}

@mixin room-dark-button() {
  right: 30px;
  left: auto;
  font-size: $room-text-font-size;
  color: $room-button-color;
  top: $room-button-dark-position;
  height: $room-button-size;
  line-height: $room-button-size;
  width: $room-button-dark-width;
  text-align: center;
  border: 0;
  cursor: pointer;
  will-change: opacity;
  transition: $room-button-transition;

  &:not(.#{room-icon}) {
    background-color: $room-button-background;
    border-radius: $room-button-size;
    box-shadow: $room-button-shadow;

    svg,
    img {
      @include room-button-icon;
    }
  }

  &.#{room-icon} {
    background: none;
    mix-blend-mode: $room-icon-blend-mode;
    color: $room-icon-color;
  }

  &:hover {
    opacity: 1;
    transition: $room-button-transition;
  }
}

@mixin room-dark-button-active() {
  box-shadow: $room-dark-button-current-shadow;
}


/// End of Mixing


/// DO NOT MODIFY ABOVE, TRY TO NOT MODIFY BELOW - in your own risk

.#{$room} {
  width: $room-size-width;
  padding-bottom: $room-size-height;
  font-family: $room-font-family;
  box-sizing: border-box;
  position: relative;
  display: block;
  max-height: 100%;
  overflow: hidden;
  z-index: $room-zindex;

  @media (max-width: $room-mobile-media-width) {
    width: $room-mobile-size-width;
    height: $room-mobile-size-height;
    padding-bottom: $room-mobile-size-height;
  }

  .#{$room-exit-button} {
    transition: $room-button-transition;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    z-index: calc($room-zindex + 100);
    @include room-exit-button;
  }

  .#{$room-navigations} {
    button {
      margin: calc($room-pagination-buttons-space / 2);
      @include room-button;

      &:not(.#{room-icon}) {
        border-radius: $room-button-size;
      }

      &.#{room-icon} {
        font-size: $room-button-size;
      }
    }
  }

  .#{$room-paginations} {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 4;
    bottom: $room-pagination-position;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    button {
      @include room-button($room-pagination-button-size);
      margin: calc($room-pagination-buttons-space / 2);
      display: inline-block;

      &.active {
        @include room-pagination-current;
      }

      &:not(.#{room-icon}) {
        border-radius: $room-pagination-buttons-border-radius;
      }

      &.#{room-icon} {
        font-size: $room-pagination-button-size;
      }
    }

    &.#{$room-paginations-thumbs} {
      flex-wrap: nowrap;
      align-items: center;
      max-height: $room-pagination-thumbs-max-height;

      button {
        max-width: $room-pagination-thumb-max-width;
        padding: 0;
        height: auto;
        border-radius: $room-pagination-buttons-border-radius;

        &:not(:empty) {
          flex: 0 1 auto;
          overflow: hidden;
          max-height: 100%;
          align-self: stretch;
        }

        &:empty {
          min-height: $room-button-size;
          min-width: $room-button-size;
        }

        img {
          width: 100%;
          max-height: 100%;
          min-height: 100%;
          object-fit: cover;
          height: auto;
          display: block;
        }
      }
    }
  }

  .#{$room-navigations} {
    .#{$room-prev-button} {
      @include room-prev-button;
    }

    .#{$room-next-button} {
      @include room-next-button;
    }

    .#{room-icon} {
      background: none;
      mix-blend-mode: $room-icon-blend-mode;
      color: $room-icon-color;

      svg,
      img {
        width: auto;
        height: 100%;
      }
    }
  }

  button.#{room-icon} {

    svg,
    img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }

  .#{$room-item} {
    z-index: 1000;

    .#{$room-canvas} {
      border: $room-canvas-border;
      box-shadow: $room-canvas-shadow;
    }

    img,
    picture {
      +* {
        font-size: $room-text-font-size;
        color: $room-text-color;
        text-align: center;
        line-height: $room-font-line-height;
        margin-top: $room-text-margin-top;

        @media (max-width: $room-mobile-media-width) {
          font-size: $room-text-font-size-mobile;
        }
      }
    }
  }

  .#{$room-floor} {
    z-index: 0;
    @include room-floor;
  }

  .#{$room-wall} {
    @include room-wall;
    z-index: 1;
    pointer-events: none;

    &.#{$room-wall-active} {
      pointer-events: auto;
      z-index: 10;
    }
  }

  .#{$room-ceil} {
    @include room-ceil;
  }

  .#{$room-body} {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding-bottom: $room-navigations-margin;
    background: $room-body-background;
    color: $room-text-color;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    box-sizing: border-box;

    perspective: $room-perspective;

    @media (max-width: $room-mobile-media-width) {
      perspective: $room-mobile-perspective;
    }

    .#{$room-zoom-button} {
      z-index: calc($room-zindex + 1000);
      margin: auto;
      position: absolute;
      @include room-zoom-button;
    }

    .#{$room-dark-button} {
      z-index: calc($room-zindex + 1000);
      margin: auto;
      position: absolute;
      @include room-dark-button;
    }
  }
}

.#{room-wrapper} {
  transform: translateY($room-offset-y) scale($room-scale);
}

.#{$room-arena},
.#{room-wrapper} {
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: center center;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
  transition: transform $room-rotate-speed $room-rotate-timing;
}

.#{$room} .#{$room-wall} {
  position: relative;

  >* {
    width: $room-item-width;
    height: $room-item-height;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    video {
      max-width: 100%;
      max-height: 100%;
    }

    >img,
    >picture {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
      object-fit: contain;
    }
  }

  .#{$room-item-video} {
    object-fit: contain;
    flex: 1 0 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    >iframe,
    >video {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .#{$room-item-image} {
    object-fit: contain;
    flex: 1 0 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    width: 100%;

    >img,
    >picture {
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      width: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      transition: opacity 0.5s;
    }
  }

  .#{$room-item-desc} {
    flex: 0 1 auto;
    min-width: 0;
    min-height: $room-text-min-height;
    max-height: $room-text-max-height;
    max-width: $room-text-max-width;
    padding: $room-text-padding;
    overflow: auto;
    margin: 0;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @include room-item-desc;
  }
}

@mixin walls-3d($room-s-w, $room-s-h) {
  transition: transform $room-rotate-speed $room-rotate-timing;
  transform-style: preserve-3d;
  will-change: transform;

  >div {
    position: absolute;
    height: inherit;
    width: inherit;
    backface-visibility: hidden;

    &.#{$room-ceil},
    &.#{$room-floor} {
      height: $room-s-w;
      width: $room-s-w;
    }

    &.wall-n {
      transform: translateZ(calc(-1 * $room-s-w / 2));
    }

    &.wall-w {
      transform: rotateY(89.99999999deg) translateZ(calc(-1 * $room-s-w / 2));
    }

    &.wall-s {
      transform: rotateY(180deg) translateZ(calc(-1 * $room-s-w / 2));
    }

    &.wall-e {
      transform: rotateY(-89.99999999deg) translateZ(calc(-1 * $room-s-w / 2));
    }

    &.#{$room-ceil} {
      transform: rotateX(-89.99999999deg) translateZ(calc(-1 * $room-s-w / 2)) rotate(180deg);
    }

    &.#{$room-floor} {
      $room-s-w-2: calc($room-s-w / 2);

      $room-s-w-2-set: $room-s-w-2;
      $room-s-h-set: $room-s-h;
      transform: #{rotateX(-89.99999999deg) translateZ(calc($room-s-w-2-set * -1)) rotate(180deg) rotateY(-180deg) translateZ(calc($room-s-h-set * -1))};
    }
  }
}

.#{$room} .#{$room-body} .#{$room-walls} {
  @include walls-3d($room-size-width, $room-size-height);

  @media (max-width: $room-mobile-media-width) {
    @include walls-3d($room-mobile-size-width, $room-mobile-size-height);
  }
}

.#{$room} .#{$room-walls} {
  height: $room-size-height;
  width: $room-size-width;
  position: absolute;
  margin: 0 auto;
  pointer-events: none;

  @media (max-width: $room-mobile-media-width) {
    width: $room-mobile-size-width;
    height: $room-mobile-size-height;
  }

  .#{$room-wall},
  .#{$room-ceil},
  .#{$room-floor} {
    overflow: hidden;
  }

  &.first,
  &.last {
    .#{$room-wall} {

      &.wall-e,
      &.wall-w {
        box-shadow: $room-wall-shadow;
      }
    }
  }

  &.first:not(.last) {

    .#{$room-ceil},
    .#{$room-floor} {
      &:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        pointer-events: none;
      }
    }

    .#{$room-floor} {
      &:before {
        box-shadow: $room-floor-shadow;
        left: -0;
        right: -50%;
      }
    }

    .#{$room-ceil} {
      &:before {
        right: 0;
        left: -50%;
        box-shadow: $room-ceil-shadow;
      }
    }

    .#{$room-wall} {

      &.wall-n,
      &.wall-s {
        &:before {
          box-shadow: $room-wall-shadow;
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          pointer-events: none;
        }
      }

      &.wall-n {
        &:before {
          left: 0;
          right: -50%;
        }
      }

      &.wall-s {
        &:before {
          right: 0;
          left: -50%;
        }
      }
    }
  }

  &:not(.first):not(.last) {

    .#{$room-ceil},
    .#{$room-floor} {
      &:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        pointer-events: none;
        right: -50%;
        left: -50%;
      }
    }

    .#{$room-floor} {
      &:before {
        box-shadow: $room-floor-shadow;
      }
    }

    .#{$room-ceil} {
      &:before {
        box-shadow: $room-ceil-shadow;
      }
    }

    .#{$room-wall} {

      &.wall-n,
      &.wall-s {
        &:before {
          box-shadow: $room-wall-shadow;
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: -50%;
          right: -50%;
          pointer-events: none;
        }
      }
    }
  }

  &.last:not(.first) {

    .#{$room-ceil},
    .#{$room-floor} {
      &:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        pointer-events: none;

      }
    }

    .#{$room-floor} {
      &:before {
        box-shadow: $room-floor-shadow;
        left: -50%;
        right: 0;
      }
    }

    .#{$room-ceil} {
      &:before {
        right: -50%;
        left: 0;
        box-shadow: $room-ceil-shadow;
      }
    }

    .#{$room-wall} {

      &.wall-n,
      &.wall-s {
        &:before {
          box-shadow: $room-wall-shadow;
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          pointer-events: none;
        }
      }

      &.wall-n {
        &:before {
          left: -50%;
          right: 0;
        }
      }

      &.wall-s {
        &:before {
          left: 0;
          right: -50%;
        }
      }
    }
  }

  &.first.last {
    .#{$room-floor} {
      box-shadow: $room-floor-shadow;
    }

    .#{$room-ceil} {
      box-shadow: $room-ceil-shadow;
    }

    .#{$room-wall} {

      &.wall-n,
      &.wall-s {
        box-shadow: $room-wall-shadow;
      }
    }
  }

  >div {
    position: absolute;
    backface-visibility: hidden;
  }
}

.#{$room} {
  &.#{$room-zoom} {
    .#{$room-body} {
      .#{$room-wrapper} {
        transition: transform $room-rotate-speed $room-rotate-timing;
        transform: scale($room-scale-zoom);
        will-change: transform;
      }
    }
  }
}

/// Variables eject

.#{$room} {
  --room-body-background-blend-mode: #{$room-light-background-blend-mode};
  --room-body-background: #{$room-light-body-background};
  --room-text-color: #{$room-light-text-color};
  --room-link-color: #{$room-light-link-color};
  --room-floor-background: #{$room-light-floor-background};
  --room-floor-shadow: #{$room-light-floor-shadow};
  --room-wall-background: #{$room-light-wall-background};
  --room-wall-shadow: #{$room-light-wall-shadow};
  --room-ceil-background: #{$room-light-ceil-background};
  --room-ceil-shadow: #{$room-light-ceil-shadow};
  --room-button-background: #{$room-light-button-background};
  --room-button-color: #{$room-light-button-color};
  --room-icon-color: #{$room-light-icon-color};
  --room-button-border: #{$room-light-button-border};
  --room-button-shadow: #{$room-light-button-shadow};
  --room-button-current-background: #{$room-light-button-current-background};
  --room-button-current-border: #{$room-light-button-current-border};
  --room-button-current-color: #{$room-light-button-current-color};
  --room-button-current-shadow: #{$room-light-button-current-shadow};
  --room-canvas-border: #{$room-light-canvas-border};
  --room-canvas-shadow: #{$room-light-canvas-shadow};

  &.#{$room-dark} {
    --room-body-background-blend-mode: #{$room-dark-background-blend-mode};
    --room-body-background: #{$room-dark-body-background};
    --room-text-color: #{$room-dark-text-color};
    --room-link-color: #{$room-dark-link-color};
    --room-floor-background: #{$room-dark-floor-background};
    --room-floor-shadow: #{$room-dark-floor-shadow};
    --room-wall-background: #{$room-dark-wall-background};
    --room-wall-shadow: #{$room-dark-wall-shadow};
    --room-ceil-background: #{$room-dark-ceil-background};
    --room-ceil-shadow: #{$room-dark-ceil-shadow};
    --room-button-background: #{$room-dark-button-background};
    --room-button-color: #{$room-dark-button-color};
    --room-icon-color: #{$room-dark-icon-color};
    --room-button-border: #{$room-dark-button-border};
    --room-button-shadow: #{$room-dark-button-shadow};
    --room-button-current-background: #{$room-dark-button-current-background};
    --room-button-current-border: #{$room-dark-button-current-border};
    --room-button-current-color: #{$room-dark-button-current-color};
    --room-button-current-shadow: #{$room-dark-button-current-shadow};
    --room-canvas-border: #{$room-dark-canvas-border};
    --room-canvas-shadow: #{$room-dark-canvas-shadow};
  }
}

@media (prefers-color-scheme: dark) {
  .#{$room}.#{$room-dark-auto} {
    --room-body-background-blend-mode: #{$room-dark-background-blend-mode};
    --room-body-background: #{$room-dark-body-background};
    --room-text-color: #{$room-dark-text-color};
    --room-link-color: #{$room-dark-link-color};
    --room-floor-background: #{$room-dark-floor-background};
    --room-floor-shadow: #{$room-dark-floor-shadow};
    --room-wall-background: #{$room-dark-wall-background};
    --room-wall-shadow: #{$room-dark-wall-shadow};
    --room-ceil-background: #{$room-dark-ceil-background};
    --room-ceil-shadow: #{$room-dark-ceil-shadow};
    --room-button-background: #{$room-dark-button-background};
    --room-button-color: #{$room-dark-button-color};
    --room-button-border: #{$room-dark-button-border};
    --room-button-shadow: #{$room-dark-button-shadow};
    --room-button-current-background: #{$room-dark-button-current-background};
    --room-button-current-border: #{$room-dark-button-current-border};
    --room-button-current-color: #{$room-dark-button-current-color};
    --room-button-current-shadow: #{$room-dark-button-current-shadow};
    --room-canvas-border: #{$room-dark-canvas-border};
    --room-canvas-shadow: #{$room-dark-canvas-shadow};

    .#{$room-dark-button} {
      @include room-dark-button-active;
    }
  }
}