mixin flaps(taped)
  .package__flap.package__flap--top
    if taped
      .package__tape.package__tape--top
  .package__flap.package__flap--bottom
    if taped
      .package__tape.package__tape--bottom

mixin side(taped = false)
  .package__side(class=`package__side--${attributes.class || 'side'}`)
    +flaps(taped)
    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__shadow
    .package
      .package__content
        svg.package__icon.package__icon--css(role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg")
          title CSS3
          path(d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z")
        svg.package__icon.package__icon--html(role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg")
          title HTML5
          path(d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z")
        svg.package__icon.package__icon--js(role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg")
          title JavaScript
          path(d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z")
      +side(true).main
        +side.tabbed
          img.package__branding.package__branding--shadow(src="https://assets.codepen.io/605876/avatar.png")
          img.package__branding(src="https://assets.codepen.io/605876/avatar.png")
        +side.extra
          +side.flipped
            span.package__direction
              svg(viewBox="0 0 256 512" title="long-arrow-alt-up")
                path(d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z")
              span THIS WAY UP
              svg(viewBox="0 0 256 512" title="long-arrow-alt-up")
                path(d="M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z")
            span.package__label.package__label--shadow
            span.package__label

: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%)
  --tape hsl(26, 37%, 51%)
  --no-of-steps 23

*
*: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
  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))

#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
  *:before
    --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) ease-in-out, opacity calc(var(--speed, 0.2) * 1s) calc((var(--step-delay) * var(--delay, 0.2)) * 1s) ease-in-out

    
.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__tape--bottom
  --step 8
  
.package__wrapper
  --step 9
  
.package
.package__shadow
  --step 10
  
.package__icon--html
  --step 12
.package__icon--css
  --step 13
.package__icon--js
  --step 14
  
.package__side--extra > .package__flap--top
  --step 16
.package__side--tabbed > .package__flap--top
  --step 17
.package__side--main > .package__flap--top
  --step 18
.package__side--flipped > .package__flap--top
  --step 19
  
.package__tape--top
  --step 20
  
.package__branding
.package__branding--shadow
.package__label
.package__label--shadow
  --step 21
  
.package__label:after
  --step 22
.package__label:before
  --step 23
    
.package
  height calc(var(--height, 20) * 1vmin)
  width calc(var(--width, 20) * 1vmin)
  transform-origin 50% 100% 
  transform rotateX(calc(var(--packaged, 0) * -90deg))
  
  &__icon
    --speed 0.5
    position absolute
    top 50%
    left 50%
    width 40%
    transform translate(-50%, -50%) translate3d(calc(var(--x, 0) * 1%), calc((((1 - var(--packaged,0)) * (var(--y, 0) * (max(var(--height), var(--depth), var(--width)))))) * -1.25vmin), calc(var(--z, 0) * 1vmin))
    opacity var(--packaged, 0)

    &--js
      --x 60
      --y 1.4
      --z 0
      fill #F7DF1E
    &--html
      --x 0
      --y 1.6
      --z -3
      fill #E34F26
    &--css
      --x -50
      --y 1.2
      --z 3
      fill #1572B6
  
  &__content
    width calc(min(var(--height), var(--width)) * 1vmin)
    height calc(var(--height) * 1vmin)
    position absolute
    left 50%
    bottom 0%
    transform-origin 50% 100%
    transform translate(-50%, 0) rotateX(0deg) rotateY(0deg) translate3d(0, 0, calc(var(--depth, 20) * 0.5vmin)) rotateY(45deg)
  
  &__shadow
    position absolute
    height calc(var(--depth, 20) * 1vmin)
    width 100%
    top 100%
    left 0
    background hsla(0, 0%, 35%, 0.75)
    transform-origin 50% 0
    transform scale(0.99) scaleY(var(--packaged, 0))

  &__wrapper
    transform translate(0, calc((var(--packaged, 0) * var(--depth, 20)) * -1vmin))
    
  &__tape
    background var(--tape)
    height min(4vmin, 50%)
    width 94%
    left 50%
    position absolute
    transform-origin 0 50%
    transform translate3d(-50%, var(--offset-y), -2px) scaleX(var(--packaged, 0))

    &--bottom
      --offset-y 50%
      bottom 0

    &--top
      --offset-y -50%
      top 0
    
  &__direction
    display inline-flex
    align-items center
    font-family sans-serif
    font-weight bold
    font-size 1.75vmin
    transform rotateY(180deg) translate3d(0, 0, 1px)
    position absolute
    bottom 0
    right 0
    padding 5%
    justify-content flex-end
    color hsl(0, 0%, 10%)
    backface-visibility hidden
    -webkit-backface-visibility hidden

    svg
      fill currentColor
      width 8%
      min-width 2vmin
    
  &__label
    height 20%
    width 30%
    background hsl(0, 0%, 98%)
    position absolute
    right 10%
    top 20%
    border-radius 5%
    opacity var(--packaged, 0)
    -webkit-backface-visibility hidden
    backface-visibility hidden
    transform rotateY(180deg) translate3d(0, 0, calc((1 - (var(--packaged, 0))) * 10vmin))

    &--shadow
      transform rotateY(180deg) translate3d(0, 0, 0) scale(calc(var(--packaged, 0) * 0.99))
      background hsl(0, 0%, 10%)

    &:after
    &:before
      content ''
      position absolute
      height 20%
      width var(--line-length, 70%)
      top var(--line, 20%)
      left 10%
      background hsl(0, 0%, 10%)
      transform-origin 0 50%
      transform scaleX(var(--packaged, 0))

    &:before
      --line 50%
      --line-length 40%
  
  &__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%
      
  &__branding
    height 30%
    position absolute
    top 10%
    left 10%
    transform rotateY(180deg) translate3d(0, 0, 1px) rotate(-20deg) translate3d(0, 0, calc((1 - (var(--packaged, 0))) * 10vmin))
    opacity var(--packaged, 0)
    -webkit-backface-visibility hidden
    backface-visibility hidden

    &--shadow
      transform rotateY(180deg) translate3d(0, 0, 1px) rotate(-20deg) translate3d(0, 0, 0) scale(var(--packaged, 0))
      filter brightness(0)
      // opacity var(--packaged, 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)