Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                mixin cameras
  .container
    - for (i = 0; i < 400; i++)
      .trigger
    .monitor
      .camera.-z
        .camera.-y
          .camera.-x
            block

mixin floorWall
  .face.-front.-wall
    .roof.-kawara
  .face.-left.-wall
    .roof.-kawara
  .face.-right.-wall
    .roof.-kawara
  .face.-back.-wall
    .roof.-kawara

+cameras
  .case
    .face.-front
      .comment
        | 松本城
        br
        small.small Nagano Japan
    .face.-left
    .face.-top
    .face.-bottom
    .face.-right
    .face.-back
  .castle
    .floor5
      +floorWall
      .asset
        .assetface.-front
        .assetface.-left
        .assetface.-right
        .assetface.-back
    .floor4
      +floorWall
      .asset
        .assetface.-front
        .assetface.-left
        .assetface.-right
        .assetface.-back
    .floor3
      +floorWall
      .asset
        .assetface.-front
        .assetface.-left
        .assetface.-right
        .assetface.-back
    .floor2
      +floorWall
    .floor1
      +floorWall
    .base
      .face.-front
      .face.-left
      .face.-bottom
      .face.-right
      .face.-back
!

CSS 

              
                body {
  background: radial-gradient(circle, rgba(222,229,232,1) 0%, rgba(109,124,147,1) 100%);
  height: 100vh;
  overflow: hidden;
  font-family: "Sawarabi Mincho";
}

* {
  transform-style: preserve-3d;
}

div {
  transform-style: preserve-3d;
  position: absolute;
}

.container {
  position: relative;
  display: grid;
  grid-template-rows: repeat(20, 5vh);
  grid-template-columns: repeat(20, 5vw);
  transform-style: preserve-3d;
  cursor: zoom-in;
  
  &:active {
    .monitor {
      transform: scale3d(2,2,2);
    }
  }
}

.monitor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 900px;
  transition: 300ms;
}

.trigger {
  position: relative;
  
  @for $i from 1 through 20 {
    @for $j from 1 through 20 {
      $key: ($i - 1) * 20 + $j;
      
      &:nth-child(#{$key}) {
        &:hover ~ .monitor {
          .camera {
            &.-x {
              transform: rotateX(($i - 8) * 8deg - 32);
            }
            
            &.-y {
              transform: rotateY(($j - 8) * 18deg - 24);
            }
          }
        }
      }
    }
  }
}

.camera {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 500ms;
  
  &.-x {
    transform: rotateX(0deg);
  }
  
  &.-y {
    transform: rotateY(0deg);
  }
}

$floorHeight: 40px;
$contrast: 4;

$wallRed1: 70;
$wallGreen1: 77;
$wallBlue1: 97;

$wallRed2: 57;
$wallGreen2: 63;
$wallBlue2: 77;

$wallRed3: 245;
$wallGreen3: 245;
$wallBlue3: 245;

$kawaraRed1: 206;
$kawaraGreen1: 209;
$kawaraBlue1: 221;

$kawaraRed2: 161;
$kawaraGreen2: 168;
$kawaraBlue2: 186;

$opacity: 1;

.castle {
  transform: scale3d(0.8, 0.8, 0.8) translateY(150px);
  
  .face {
    backface-visibility: hidden;
  }
}

.case {
  $width: 250px;
  $height: 400px;
  $depth: 250px;
  $red: 255;
  $green: 255;
  $blue: 255;
  $opacity: 0.15;
  $shadowRatio: 3;

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;

  .face {
    position: absolute;
    
    .comment {
      text-align: center;
      padding-bottom: 30px;
      font-size: 30px;
      opacity: 0.6;
      line-height: 0.8;
      letter-spacing: 3px;
      
      .small {
        text-align: center;
        font-size: 10px;
      }
    }

    &.-front {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
      background: rgba($red - 5 * $shadowRatio, $green - 5 * $shadowRatio, $blue - 5 * $shadowRatio, $opacity);
    }

    &.-left {
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
      background: rgba($red - 10 * $shadowRatio, $green - 10 * $shadowRatio, $blue - 10 * $shadowRatio, $opacity);
    }

    &.-top {
      width: $width;
      height: $depth;
      transform: translate(-50%, -50%) rotateX(90deg) translateZ($height / 2);
      background: rgba($red, $green, $blue, $opacity);
    }

    &.-bottom {
      width: $width;
      height: $depth;
      transform: translate(-50%, -50%) rotateX(-90deg) translateZ($height / 2);
      background: rgba($red - 20 * $shadowRatio, $green - 20 * $shadowRatio, $blue - 20 * $shadowRatio, $opacity);
    }

    &.-right {
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
      background: rgba($red - 10 * $shadowRatio, $green - 10 * $shadowRatio, $blue - 10 * $shadowRatio, $opacity);
    }

    &.-back {
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
      background: rgba($red - 15 * $shadowRatio, $green - 15 * $shadowRatio, $blue - 15 * $shadowRatio, $opacity);
    }
  }
}

.roof {
  left: 50%;
  transform-origin: 50% 0;
  backface-visibility: visible;
  clip-path: polygon(
    50% 0,
    100% 100%,
    0 100%
  );
}

.floor5 {
  $width: 90px;
  $height: $floorHeight;
  $depth: 90px;
  $shadowRatio: 2;
  $crop: 17.5px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateY(#{-$height * 5 - 5});

  .face {
    position: absolute;
    
    .roof {
      width: $width + 36px;
      height: 72px;
      transform: translateX(-50%) rotateX(60deg) translateY(-52px);
    }

    &.-front {
      $colorGap: 5 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-left {
      $colorGap: 10 * $contrast;
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-right {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-back {
      $colorGap: 15 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }
  }
  
  .asset {
    $width: 100px;
    $height: 50px;
    $depth: 100px;
    $shadowRatio: 2;
    
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 20px;
      border-radius: 100%;
      border-bottom: 8px solid rgba(204, 180, 28, $opacity);
      transform: translate(-50%, -50%) translateY(-38px) translateZ(50px) rotateY(90deg) rotateZ(30deg);
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 20px;
      border-radius: 100%;
      border-bottom: 8px solid rgba(204, 180, 28, $opacity);
      transform: translate(-50%, -50%) translateY(-38px) translateZ(-50px) rotateY(90deg) rotateZ(-30deg);
    }

    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateY(-42px);

    .assetface {
      position: absolute;

      &.-front {
        $colorGap: 5 * $contrast;
        width: $width;
        height: $height;
        transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 10px 10px;
        
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(45deg);
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(-45deg);
        }
        
        clip-path: polygon(
          50% 0,
          100% 100%,
          0 100%
        );
      }

      &.-left {
        $colorGap: 10 * $contrast;
        
        width: $depth;
        height: $height * 1.4;
        transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2 - 26px) rotateX(45deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }

      &.-right {
        $colorGap: 10 * $contrast;
        
        width: $depth;
        height: $height * 1.4;
        transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2 - 26px) rotateX(45deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }

      &.-back {
        $colorGap: 15 * $contrast;
        
        width: $width;
        height: $height;
        transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 10px 10px;
        
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(45deg);
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(-45deg);
        }
        clip-path: polygon(
          50% 0,
          100% 100%,
          0 100%
        );
      }
    }
  }
}

.floor4 {
  $width: 100px;
  $height: $floorHeight;
  $depth: 100px;
  $shadowRatio: 2;
  $crop: 17.5px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateY(#{-$height * 4 - 5});

  .face {
    position: absolute;
    
    .roof {
      width: $width + 36px;
      height: 78px;
      transform: translateX(-50%) rotateX(60deg) translateY(-58px);
    }

    &.-front {
      $colorGap: 5 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-left {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-right {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-back {
      $colorGap: 15 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }
  }
  
  .asset {
    $width: 90px;
    $height: 45px;
    $depth: 150px;
    $shadowRatio: 2;

    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateY(5px) rotateY(-90deg);

    .assetface {
      position: absolute;

      &.-front {
        $colorGap: 10 * $contrast;
        
        width: $width;
        height: $height;
        transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 10px 10px;
        
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(45deg);
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(-45deg);
        }
        clip-path: polygon(
          50% 0,
          100% 100%,
          0 100%
        );
      }

      &.-left {
        $colorGap: 5 * $contrast;
        
        width: $depth;
        height: $height * 1.4;
        transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2 - 23px) rotateX(45deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }

      &.-right {
        $colorGap: 15 * $contrast;
        
        width: $depth;
        height: $height * 1.4;
        transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2 - 23px) rotateX(45deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }

      &.-back {
        $colorGap: 10 * $contrast;
        
        width: $width;
        height: $height;
        transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 10px 10px;
        
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(45deg);
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(-45deg);
        }
        
        clip-path: polygon(
          50% 0,
          100% 100%,
          0 100%
        );
      }
    }
  }
}

.floor3 {
  $width: 130px;
  $height: $floorHeight;
  $depth: 130px;
  $shadowRatio: 2;
  $crop: 17.5px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateY(#{-$height * 3 - 5});

  .face {
    position: absolute;
    
    .roof {
      width: $width + 36px;
      height: 96px;
      transform: translateX(-50%) rotateX(60deg) translateY(-76px);
    }

    &.-front {
      $colorGap: 5 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-left {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-right {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-back {
      $colorGap: 15 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }
  }
  
  .asset {
    $width: 90px;
    $height: 45px;
    $depth: 170px;
    $shadowRatio: 2;

    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateY(5px);

    .assetface {
      position: absolute;

      &.-front {
        $colorGap: 5 * $contrast;
        
        width: $width;
        height: $height;
        transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 10px 10px;
        
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(45deg);
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(-45deg);
        }
        
        clip-path: polygon(
          50% 0,
          100% 100%,
          0 100%
        );
      }

      &.-left {
        $colorGap: 10 * $contrast;
        
        width: $depth;
        height: $height * 1.4;
        transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2 - 24px) rotateX(45deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }

      &.-right {
        $colorGap: 10 * $contrast;
        
        width: $depth;
        height: $height * 1.4;
        transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2 - 24px) rotateX(45deg);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }

      &.-back {
        $colorGap: 15 * $contrast;
        
        width: $width;
        height: $height;
        transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
        background:
          repeating-linear-gradient(
            90deg,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
            rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
            rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 10px 10px;
        
        &::before {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(45deg);
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          width: 20px;
          height: $height * 4;
          background: rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity);
          transform-origin: 50% 0;
          transform: translateX(-50%) rotateZ(-45deg);
        }
        
        clip-path: polygon(
          50% 0,
          100% 100%,
          0 100%
        );
      }
    }
  }
}

.floor2 {
  $width: 150px;
  $height: $floorHeight;
  $depth: 150px;
  $shadowRatio: 2;
  $crop: 17.5px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateY(#{-$height * 2 - 5});

  .face {
    position: absolute;
    
    .roof {
      width: $width + 36px;
      height: 107px;
      transform: translateX(-50%) rotateX(60deg) translateY(-87px);
    }

    &.-front {
      $colorGap: 5 * $contrast;
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-left {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-right {
      $colorGap: 10 * $contrast;
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-back {
      $colorGap: 15 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }
  }
}

.floor1 {
  $width: 160px;
  $height: $floorHeight;
  $depth: 160px;
  $shadowRatio: 2;
  $crop: 17.5px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateY(#{-$height - 5});

  .face {
    position: absolute;
    
    .roof {
      width: $width + 35px;
      height: 113px;
      transform: translateX(-50%) rotateX(60deg) translateY(-93px);
    }

    &.-front {
      $colorGap: 5 * $contrast;

      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-left {
      $colorGap: 10 * $contrast;

      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-right {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }

    &.-back {
      $colorGap: 15 * $contrast;
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2);
      background:
        linear-gradient(
          0deg,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, 0) 35% 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 60%,
          rgba($wallRed3 - $colorGap, $wallGreen3 - $colorGap, $wallBlue3 - $colorGap, $opacity) 75%
        ),
        repeating-linear-gradient(
          90deg,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25%,
          rgba($wallRed1 - $colorGap, $wallGreen1 - $colorGap, $wallBlue1 - $colorGap, $opacity) 25% 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 50%,
          rgba($wallRed2 - $colorGap, $wallGreen2 - $colorGap, $wallBlue2 - $colorGap, $opacity) 75%
        );
      background-size: 100%, 10px 10px;
      
      .roof {
        background:
          repeating-linear-gradient(
            90deg,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25%,
            rgba($kawaraRed1 - $colorGap, $kawaraGreen1 - $colorGap, $kawaraBlue1 - $colorGap, $opacity) 25% 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 50%,
            rgba($kawaraRed2 - $colorGap, $kawaraGreen2 - $colorGap, $kawaraBlue2 - $colorGap, $opacity) 75%
          );
        background-size: 5px 5px;
      }
    }
  }
}

.base {
  $width: 200px;
  $height: 80px;
  $depth: 200px;
  $red1: 194;
  $green1: 185;
  $blue1: 175;
  $red2: 163;
  $green2: 150;
  $blue2: 140;
  $shadowRatio: 2;
  $crop: 21px;
  $tilt: 15deg;
  $slide: -11px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;

  .face {
    position: absolute;
    box-shadow: 0 0 20px rgba(#000, 0.15) inset;

    &.-front {
      $colorGap: 5 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(0deg) translateZ($depth / 2) rotateX($tilt) translateZ($slide);
      background:
        repeating-linear-gradient(
          45deg,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25%,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25% 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 75%
        );
      background-size: 7px 4px;
      clip-path: polygon(
        #{$crop} 0,
        calc(100% - #{$crop}) 0,
        100% 100%,
        0 100%
      );
    }

    &.-left {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2) rotateX($tilt) translateZ($slide);
      background:
        repeating-linear-gradient(
          45deg,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25%,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25% 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 75%
        );
      background-size: 7px 4px;
      clip-path: polygon(
        #{$crop} 0,
        calc(100% - #{$crop}) 0,
        100% 100%,
        0 100%
      );
    }

    &.-bottom {
      $colorGap: 20 * $contrast;
      
      width: $width;
      height: $depth;
      transform: translate(-50%, -50%) rotateX(-90deg) translateZ($height / 2) translateZ(1px);
      background:
        repeating-linear-gradient(
          45deg,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25%,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25% 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 75%
        );
      background-size: 7px 4px;
    }

    &.-right {
      $colorGap: 10 * $contrast;
      
      width: $depth;
      height: $height;
      transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2) rotateX($tilt) translateZ($slide);
      background:
        repeating-linear-gradient(
          45deg,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25%,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25% 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 75%
        );
      background-size: 7px 4px;
      clip-path: polygon(
        #{$crop} 0,
        calc(100% - #{$crop}) 0,
        100% 100%,
        0 100%
      );
    }

    &.-back {
      $colorGap: 15 * $contrast;
      
      width: $width;
      height: $height;
      transform: translate(-50%, -50%) rotateY(180deg) translateZ($depth / 2) rotateX($tilt) translateZ($slide);
      background:
        repeating-linear-gradient(
          45deg,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25%,
          rgba($red1 - $colorGap, $green1 - $colorGap, $blue1 - $colorGap, $opacity) 25% 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 50%,
          rgba($red2 - $colorGap, $green2 - $colorGap, $blue2 - $colorGap, $opacity) 75%
        );
      background-size: 7px 4px;
      clip-path: polygon(
        #{$crop} 0,
        calc(100% - #{$crop}) 0,
        100% 100%,
        0 100%
      );
    }
  }
}
!

JS
!
999px

Console