mixin cuboid()
  .cuboid(class!=attributes.class)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++
.scene
  .printer
    .printer__side.printer__side--left
      +cuboid()(class="cuboid--side")
    .printer__side.printer__side--right
      +cuboid()(class="cuboid--side")
    .printer__tray.printer__tray--bottom
      +cuboid()(class="cuboid--tray")
    .printer__tray.printer__tray--top
      +cuboid()(class="cuboid--tray")
    .printer__top
      +cuboid()(class="cuboid--top")
    .printer__back
      +cuboid()(class="cuboid--back")

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap')

.cuboid
  width 100%
  height 100%
  position relative
  // 1 is the top and go top, back, bottom, front, right, left

  &__side:nth-of-type(1)
    background var(--shade-one)
    height calc(var(--thickness) * 1vmin)
    width 100%
    position absolute
    top 0
    transform translate(0, -50%) rotateX(90deg)

  &__side:nth-of-type(2)
    background var(--shade-two)
    height 100%
    width calc(var(--thickness) * 1vmin)
    position absolute
    top 50%
    right 0
    transform translate(50%, -50%) rotateY(90deg)

  &__side:nth-of-type(3)
    background var(--shade-three)
    width 100%
    height calc(var(--thickness) * 1vmin)
    position absolute
    bottom 0
    transform translate(0%, 50%) rotateX(90deg)

  &__side:nth-of-type(4)
    background var(--shade-four)
    height 100%
    width calc(var(--thickness) * 1vmin)
    position absolute
    left 0
    top 50%
    transform translate(-50%, -50%) rotateY(90deg)

  &__side:nth-of-type(5)
    background var(--shade-five)
    height 100%
    width 100%
    transform translate3d(0, 0, calc(var(--thickness) * 0.5vmin))
    position absolute
    top 0
    left 0

  &__side:nth-of-type(6)
    background var(--shade-six)
    height 100%
    width 100%
    transform translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg)
    position absolute
    top 0
    left 0

:root
  --base-size 12
  --depth calc(var(--base-size) * 2.25)
  --height calc(var(--base-size) * 1vmin)
  --width calc(var(--base-size) * 1.4vmin)
  --base-hue 206
  --accent-hue 35
  --bg 'hsl(%s 20% 74%)' % 276
  --shoot-speed 1.5
  --load-speed 2
  --print-speed 1
  // Colors
  --p-1 'hsl(%s, 30%, 90%)' % var(--base-hue)
  --p-2 'hsl(%s, 30%, 86%)' % var(--base-hue)
  --p-3 'hsl(%s, 30%, 82%)' % var(--base-hue)
  --p-4 'hsl(%s, 30%, 78%)' % var(--base-hue)
  --p-5 'hsl(%s, 30%, 72%)' % var(--base-hue)
  --p-6 'hsl(%s, 30%, 68%)' % var(--base-hue)
  --p-7 'hsl(%s, 30%, 64%)' % var(--base-hue)
  --p-8 'hsl(%s, 30%, 20%)' % var(--base-hue)
  --t-1 hsl(0, 0%, 40%)
  --t-2 hsl(0, 0%, 36%)
  --t-3 hsl(0, 0%, 32%)
  --t-4 hsl(0, 0%, 28%)
  --t-5 hsl(0, 0%, 24%)
  --g-1 'hsl(%s, 40%, 94%)' % var(--base-hue)
  --g-2 'hsl(%s, 40%, 90%)' % var(--base-hue)
  --g-3 'hsl(%s, 40%, 86%)' % var(--base-hue)
  --g-4 'hsl(%s, 40%, 80%)' % var(--base-hue)
  --g-5 'hsl(%s, 40%, 96%)' % var(--base-hue)
  --a-1 'hsl(%s, 10%, 65%)' % var(--accent-hue)
  --a-2 'hsl(%s, 10%, 60%)' % var(--accent-hue)
  --a-3 'hsl(%s, 10%, 55%)' % var(--accent-hue)
  --a-4 'hsl(%s, 10%, 50%)' % var(--accent-hue)
  --a-5 'hsl(%s, 10%, 45%)' % var(--accent-hue)
  --transform-style preserve-3d

    
*
*:after
*:before
  box-sizing border-box
  transform-style var(--transform-style)
  touch-action none    

body
  min-height 100vh
  display grid
  place-items center
  background var(--bg)
  overflow hidden
  touch-action none

.scene
  position fixed
  top 50%
  left 50%
  height var(--height)
  width var(--width)
  // background hsla(10 80% 70% 0.25)
  transform translate3d(-50%, -50%, 100vmin)
  transform translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg))


.printer
  height 100%
  width 100%
  position absolute
  left 50%

  & > *
    position absolute
    transition transform 0.2s

  *
    transform-style none

  &__top
    height 40%
    width 100%
    transform translate3d(0, calc((var(--exploded, 0) * 8) * -1vmin), 0)

  &__back
    height 60%
    width 50%
    bottom 0
    right 0

  &__side
    height 60%
    width 100%
    bottom 0

    &--right
      transform translate3d(0, 0, calc(((var(--exploded, 0) * 20) + var(--depth)) * 0.375vmin))

    &--left
      transform translate3d(0, 0, calc(((var(--exploded, 0) * 20) + var(--depth)) * -0.375vmin))

  &__tray
    height 10%
    width 100%

    &--bottom
      bottom 0
      right 50%
      transform translateX(calc(var(--exploded, 0) * -10vmin))

    &--top
      top 0
      right 0
      transform translateX(calc(var(--exploded, 0) * 10vmin)) translate(52%, 0) rotate(-75deg)


.cuboid--top
  --thickness var(--depth)
  --shade-one linear-gradient(hsl(0, 0%, 16%), hsl(0, 0%, 16%)) 100% 50% / 14% 54% no-repeat,
        linear-gradient(var(--p-7), var(--p-7)) 40% 50% / 12% 32% no-repeat,
        linear-gradient(var(--p-7), var(--p-7)) 30% 50% / 2% 12% no-repeat,
        linear-gradient(var(--p-3), var(--p-3)) 0% 50% / 66% 50% no-repeat,
        var(--p-1)
  --shade-two var(--p-1)
  --shade-three var(--p-8)
  --shade-four linear-gradient(var(--p-4), var(--p-4)) 50% 0% / 50% 100% no-repeat, 
               var(--p-2)
  --shade-five var(--p-3)
  --shade-six var(--p-3)
    
  & > div
    &:nth-of-type(1)
      &:after
        content ''
        position absolute
        top 7%
        left 10%
        height calc(var(--depth) * 0.12vmin)
        width calc(var(--depth) * 0.12vmin)
        background url(https://assets.codepen.io/605876/avatar.png)
        background-size cover
        transform rotate(90deg)
        filter grayscale(0.5)
    &:nth-of-type(4)
      &:after
        content ''
        position absolute
        top 25%
        left 50%
        height 15%
        width 10%
        border-radius 25%
        background var(--p-6)
        transform translate3d(-50%, -50%, -1px)

.cuboid--back
  --thickness calc(var(--depth) * 0.5)
  --shade-one var(--p-1)
  --shade-two var(--t-1)
  --shade-three var(--p-2)
  --shade-four var(--t-5)
  --shade-five var(--p-3)
  --shade-six var(--p-3)    

.cuboid--tray
  --thickness calc(var(--depth) * 0.5)
  --shade-one linear-gradient(var(--t-2), var(--t-2)) 10% 50% / 5% 50% no-repeat, var(--t-1)
  --shade-two var(--t-1)
  --shade-three var(--t-2)
  --shade-four var(--t-2)
  --shade-five var(--t-3)
  --shade-six var(--t-3)    

.cuboid--side
  --thickness calc(var(--depth) * 0.25)
  --shade-one var(--p-1)
  --shade-two var(--p-1)
  --shade-three var(--p-2)
  --shade-four var(--p-2)
  --shade-five repeating-linear-gradient(var(--t-4) 0 25%, transparent 25% 50%) 90% 70% / 30% 20% no-repeat, var(--p-3)
  --shade-six repeating-linear-gradient(var(--t-4) 0 25%, transparent 25% 50%) 90% 70% / 30% 20% no-repeat, var(--p-3)

.printer__side--left > .cuboid 
  --shade-five var(--p-8)
.printer__side--right > .cuboid
  --shade-six var(--p-8)

import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const CONTROLLER = new GUI()

const CONFIG = {
  explode: false,
  extruded: true,
}

const UPDATE = () => {
  document.documentElement.style.setProperty('--exploded', CONFIG.explode ? 1 : 0)
  document.documentElement.style.setProperty('--transform-style', CONFIG.extruded ? 'preserve-3d' : 'flat')
}


CONTROLLER.add(CONFIG, 'explode')
  .name('Explode?')
  .onChange(UPDATE)
CONTROLLER.add(CONFIG, 'extruded')
  .name('Extrude?')
  .onChange(UPDATE)