mixin cuboid()
  .cuboid(class!=attributes.class)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++

.scene
  .extrusion
    +cuboid()(class="extrusion__cuboid")

.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-two)
    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-three)
    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-one)
    height 100%
    width 100%
    transform translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg)
    position absolute
    top 0
    left 0

*
*:after
*:before
  box-sizing border-box
  transform-style preserve-3d
  transition background 0.25s, transform 0.25s

:root
  --shade-one 'hsla(210, 80%, 80%, %s)' % calc(1 - var(--wireframe, 0))
  --shade-two 'hsla(210, 80%, 50%, %s)' % calc(1 - var(--wireframe, 0))
  --shade-three 'hsla(210, 80%, 30%, %s)' % calc(1 - var(--wireframe, 0))

body
  min-height 100vh
  display grid
  place-items center

.scene
  position fixed
  top 50%
  left 50%
  transform translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg)

.extrusion
  height calc(var(--height, 10) * 1vmin)
  width calc(var(--width, 10) * 1vmin)
  position absolute
  top 50%
  left 50%
  background hsla(100, 80%, 50%, 0.5)
  transform translate(-50%, -50%) translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg)) rotateZ(calc(var(--rotate-z, 0) * 1deg))

.cuboid__side
  border-width 0.5vmin
  border-style solid
  border-color 'hsla(100, 80%, 50%, %s)' % calc(var(--wireframe) * 0.75)
  
.dg.ac
  transform translate3d(0, 0, 1000vmin)

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

const CONTROLLER = new GUI({
  width: 300,
})

const CONFIG = {
  x: 0,
  y: 0,
  z: 0,
  'rotate-x': 0,
  'rotate-y': 0,
  'rotate-z': 0,
  thickness: 4,
  width: 10,
  height: 10,
  wireframe: false,
}

const UPDATE = () => {
  Object.entries(CONFIG).forEach(([key, value]) => {
    document.documentElement.style.setProperty(`--${key}`, value)
  })
  document.documentElement.style.setProperty(
    '--wireframe',
    CONFIG.wireframe ? 1 : 0
  )
}

CONTROLLER.add(CONFIG, 'height', 1, 20, 1)
  .name('Height (vmin)')
  .onChange(UPDATE)
CONTROLLER.add(CONFIG, 'width', 1, 20, 1)
  .name('Width (vmin)')
  .onChange(UPDATE)
CONTROLLER.add(CONFIG, 'thickness', 0, 100, 1)
  .name('Thickness (vmin)')
  .onChange(UPDATE)
CONTROLLER.add(CONFIG, 'wireframe')
  .name('Wireframe')
  .onChange(UPDATE)
const TRANSLATE = CONTROLLER.addFolder('Translate')
TRANSLATE.add(CONFIG, 'x', -15, 15, 1)
  .name('X (vmin)')
  .onChange(UPDATE)
TRANSLATE.add(CONFIG, 'y', -15, 15, 1)
  .name('Y (vmin)')
  .onChange(UPDATE)
TRANSLATE.add(CONFIG, 'z', -15, 15, 1)
  .name('Z (vmin)')
  .onChange(UPDATE)
const ROTATE = CONTROLLER.addFolder('Rotate')
ROTATE.add(CONFIG, 'rotate-x', -360, 360, 1)
  .name('X (vmin)')
  .onChange(UPDATE)
ROTATE.add(CONFIG, 'rotate-y', -360, 360, 1)
  .name('Y (vmin)')
  .onChange(UPDATE)
ROTATE.add(CONFIG, 'rotate-z', -360, 360, 1)
  .name('Z (vmin)')
  .onChange(UPDATE)

UPDATE()