mixin flaps
  .package__flap.package__flap--top
  .package__flap.package__flap--bottom

mixin side
  .package__side(class=`package__side--${attributes.class || 'side'}`)
    +flaps
    if block
      block

input#package(type="checkbox")
input#s(type="radio", name="size")
label.size-label.s(for="s") S
input#m(type="radio", name="size", checked)
label.size-label.m(for="m") M
input#l(type="radio", name="size")
label.size-label.l(for="l") L
input#xl(type="radio", name="size")
label.size-label.xl(for="xl") XL
label.close(for="package") Close /
label.open(for="package") Open

.scene
  .package__wrapper
    .package
      +side.main
        +side.tabbed
        +side.extra
          +side.flipped

:root
  --bg hsl(180, 20%, 92%) 
  --face-1 hsl(28, 41%, 57%)
  --face-2 hsl(29, 58%, 66%)
  --face-3 hsl(30, 69%, 70%)
  --face-4 hsl(31, 82%, 74%)
  --face-5 hsl(30, 72%, 70%)
  --face-6 hsl(21, 75%, 28%)
  --flap-one hsl(32, 76%, 70%)
  --flap-two hsl(32, 76%, 74%)
  --flap-three hsl(32, 72%, 72%)
  --flap-four hsl(32, 78%, 76%)
  --flap-five hsl(32, 78%, 72%)

*
*:after
*:before
  box-sizing border-box
  transform-style preserve-3d
  
body
  background var(--bg)
  min-height 100vh
  display grid
  place-items center
  perspective 100vmin
  overflow hidden
  
input
  position fixed
  top 0
  left 0
  width 1px
  height 1px
  padding 0
  margin -1px
  overflow hidden
  clip rect(0, 0, 0, 0)
  white-space nowrap
  border-width 0
  
  
.close
.open
  position fixed
  height 100vh
  width 100vw
  z-index 2
  background hsla(280, 80%, 50%, 0.25)
  transform scale(var(--scale, 1)) translate3d(0, 0, 50vmin)
  transition transform 0s var(--reveal-delay, calc(((var(--no-of-steps, 15) + 1) * var(--delay, 0.2)) * 1s))

.open
  background hsla(90, 80%, 50%, 0.25)

#package:checked ~ .close
.open
  --scale 0
  --reveal-delay 0s

#package:checked ~ .open
  --scale 1
  --reveal-delay calc(((var(--no-of-steps, 15) + 1) * var(--delay, 0.2)) * 1s)


[for='s']
  --top 1rem
[for='m']
  --top calc(1rem + 49px)
[for='l']
  --top calc(1rem + 98px)
[for='xl']
  --top calc(1rem + 147px)

#s:checked ~ .s
#m:checked ~ .m
#l:checked ~ .l
#xl:checked ~ .xl
  border-color hsl(10, 80%, 50%)

.size-label
  position fixed
  top var(--top)
  right 1rem
  z-index 3
  font-family sans-serif
  font-weight bold
  color hsl(0, 0%, 15%)
  height 44px
  width 44px
  display grid
  place-items center
  background hsl(0, 0%, 99%)
  border-radius 50%
  cursor pointer
  border 4px solid hsl(180, 20%, 62%)
  transform translate(0, calc(var(--y, 0) * 1%)) scale(var(--scale, 1))
  transition transform 0.1s

  &:hover
    --y -5

  &:active
    --y 2
    --scale 0.9

#package:checked ~ .scene
  --packaged 1

#s:checked ~ .scene
  --height 10
  --width 20
  --depth 20

#m:checked ~ .scene
  --height 20
  --width 20
  --depth 20

#l:checked ~ .scene
  --height 20
  --width 30
  --depth 20  

#xl:checked ~ .scene
  --height 30
  --width 20
  --depth 30
  
.scene
  transform rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -32) * 1deg)) rotateX(90deg) translate3d(0, 0, calc(var(--height, 20) * -0.5vmin))
  
  *
  *:after
    --no-of-steps 15
    --step-delay calc(var(--step, 1) - ((1 - var(--packaged, 0)) * (var(--step) - ((var(--no-of-steps) + 1) - var(--step)))))
    transition transform calc(var(--speed, 0.2) * 1s) calc((var(--step-delay) * var(--delay, 0.2)) * 1s)

    
.package__side--extra
  --step 1
.package__side--tabbed
  --step 2
.package__side--flipped
.package__side--tabbed:after
  --step 3
.package__side--extra > .package__flap--bottom
  --step 4
.package__side--tabbed > .package__flap--bottom
  --step 5
.package__side--main > .package__flap--bottom
  --step 6
.package__side--flipped > .package__flap--bottom
  --step 7
  
.package__wrapper
  --step 8
  
.package
  --step 9
  
.package__side--extra > .package__flap--top
  --step 12
.package__side--tabbed > .package__flap--top
  --step 13
.package__side--main > .package__flap--top
  --step 14
.package__side--flipped > .package__flap--top
  --step 15
    
.package
  height calc(var(--height, 20) * 1vmin)
  width calc(var(--width, 20) * 1vmin)
  transform-origin 50% 100% 
  transform rotateX(calc(var(--packaged, 0) * -90deg))

  &__wrapper
    transform translate(0, calc((var(--packaged, 0) * var(--depth, 20)) * -1vmin))
  
  &__flap
    width 99.5%
    height 49.5%
    background var(--flap-bg, var(--face-4))
    position absolute
    left 50%
    transform translate(-50%, 0) rotateX(calc((var(--packaged, 0) * var(--rotation, -90)) * 1deg))

    &--top
      transform-origin 50% 100%
      bottom 100%

    &--bottom
      --rotation 90
      top 100%
      transform-origin 50% 0%


  &__side
    height calc(var(--height, 20) * 1vmin)
    position absolute
    top 0

    &:not(.package__side--main)
    &:not(.package__side--main):after
      transform rotateY(calc((var(--packaged, 0) * var(--rotation, 90)) * 1deg))

    &--extra
    &--tabbed
      & > .package__flap--bottom
        top 98%
      & > .package__flap--top
        bottom 98%

    &--main
      background var(--face-5)
      left 50%
      top 50%
      transform translate(-50%, -50%) translate3d(0, 0, 0)
      width calc(var(--width, 20) * 1vmin)


      & > .package__flap
        height calc(var(--depth, 20) * 0.495vmin)

    &--tabbed
      --rotation -90
      left 100%
      background var(--face-2)
      width calc(var(--depth, 20) * 1vmin)
      transform-origin 0% 50%

      & > .package__flap
        height calc(var(--width, 20) * 0.495vmin)
        --flap-bg var(--face-3)

      &:after
        content ''
        position absolute
        left 99.5%
        height 100%
        width 10%
        background var(--face-3)
        $clip = polygon(0 0%, 100% 20%, 100% 80%, 0 100%)
        clip-path $clip
        -webkit-clip-path $clip
        transform-origin 0% 50%

    &--extra
      right 100%
      background var(--face-2)
      width calc(var(--depth, 20) * 1vmin)
      transform-origin 100% 50%

      & > .package__flap
        height calc(var(--width, 20) * 0.495vmin)
        --flap-bg var(--face-3)

    &--flipped
      background var(--face-3)
      right 100%
      width calc(var(--width, 20) * 1vmin)
      transform-origin 100% 50%

      & > .package__flap
        height calc(var(--depth, 20) * 0.495vmin)
        --flap-bg var(--face-4) 
          
    &--extra > .package__flap.package__flap--top
      --flap-bg var(--flap-one)
    &--extra > .package__flap.package__flap--bottom
      --flap-bg var(--flap-two)
    &--tabbed > .package__flap.package__flap--bottom
      --flap-bg var(--flap-three)
    &--flipped > .package__flap.package__flap--bottom
      --flap-bg var(--flap-four)
    &--main > .package__flap.package__flap--top
      --flap-bg var(--flap-five)