mixin stick
  .controller__stick
    div
      div
    div
      div
mixin grip(side)
  .controller__grip(class=`controller__grip--${side}`)
    //- Top of the outer grip curve
    div
    //- Bottom of the outer grip curve
    div
    //- Slight overhang at the bottom
    div
    //- Little curve at the bottom of the base
    div
mixin grip-underlay(side)
  .controller__grip-underlay(class=`controller__grip-underlay--${side}`)
    //- Faceplate to be overlapped
    div
    //- Actual underlay piece
    div
    //- Side piece/nub at the bottom
    div
    //- Face plate
    div
label(for='toggle') Toggle CSS illustration
input#toggle(type='checkbox')
label(for='image') Hide image
input#image(type='checkbox')
.container
  img(src="https://assets.codepen.io/605876/ps5-controller.jpeg")
  .controller   
    .controller__container
      .controller__body
        .controller__trigger.controller__trigger--left
        .controller__trigger.controller__trigger--right
        .controller__body-top.controller__body-top--left
        .controller__body-top.controller__body-top--right
        .controller__body-top.controller__body-top--center
        //- Acts as a base for the entire grip
        +grip('left')
        +grip('right')
        .controller__sticks-container
          .controller__backdrop
          .controller__clip
          +grip-underlay('left')
          +grip-underlay('right')
          .controller__sticks
            div
              +stick()
            div
              +stick()
        .controller__touch-pad
          //- Bottom container
          div
            div
            div
          div
            div
            div
        .controller__speaker
          - let s = 0
          while s < 9
            div
            - s++
        .controller__start
        .controller__headphone
        .controller__buttons
          .controller__button.controller__button--triangle
          .controller__button.controller__button--square
          .controller__button.controller__button--circle
          .controller__button.controller__button--cross
        .controller__dpad
          .controller__dbutton.controller__dbutton--top
            div
          .controller__dbutton.controller__dbutton--right
            div
          .controller__dbutton.controller__dbutton--bottom
            div
          .controller__dbutton.controller__dbutton--left
            div
        .controller__auxiliary-button.controller__auxiliary-button--share
          div
        .controller__auxiliary-button.controller__auxiliary-button--options
          div
        .controller__logo
          div
            div
            div
          div
        .controller__mute
          div
          div
        .controller__patch.controller__patch--left
        .controller__patch.controller__patch--right

*
*:before
*:after
  box-sizing border-box
  
img
  position absolute
  top 50%
  left 50%
  width 75vmin
  transform translate(-50%, -50%)
  opacity 0.5
  z-index 2
  
[type='checkbox']
  margin-bottom 2rem
  
label
  margin-bottom 0.5rem
  font-weight bold
  font-family sans-serif
  color hsl(200, 100%, 99%)
  
#toggle:checked ~ .container .controller
  display block
#image:checked ~ .container img
  display none

:root
  // This color is needed to clip the border at the bottom
  --bg hsl(206, 100%, 32%)
  --accent hsl(225, 92%, 50%)
  // We know the original is 1920x1080
  --desired-size 75
  --controller-white hsl(225, 13%, 95%)
  // --controller-white red
  --controller-black hsl(0, 0%, 12%)
  // --controller-white red
  --unit calc((var(--desired-size) / 1920) * 1vmin)

body
  min-height 100vh
  background var(--bg)
  overflow auto
  display flex
  align-items center
  justify-content center
  flex-direction column

.container
  position relative
  width calc(1920 * var(--unit))
  height calc(1080 * var(--unit))
  
.controller
  display none
  &__container
    width calc(1920 * var(--unit))
    height calc(1080 * var(--unit))
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    &:before
      content ''
      position absolute
      bottom 0
      left 50%
      width 80%
      height 35%
      z-index -1
      background radial-gradient(hsla(0, 0%, 5%, 0.5), transparent 50%)
      filter blur(25px)
      transform translate(-50%, 24%)

  &__body
    width calc(1330 * var(--unit))
    height calc(880 * var(--unit))
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)

    &:before
    &:after
      content ''
      position absolute
      z-index -1
      bottom 0
      height 15%
      width 40%
      filter blur(25px)
      background radial-gradient(hsl(0, 0%, 5%), transparent 75%)

    &:before
      transform translate(-25%, 50%)
      left 0
    &:after
      right 0
      transform translate(25%, 50%)

  &__body-top
    width 200%
    height 125%
    background var(--controller-white)
    top 1%
    left 50%
    border-radius 75% 75% 0 0 / 100% 100% 0 0
    position absolute
    transform translate(-50%, 0%)
    &--center
      $clip = inset(0 32.5% 52% 32.5%)
      -webkit-clip-path $clip
      clip-path $clip
      transform translate(-50%, 0.4%)
      background hsl(225, 13%, 88%)

    &--left
      $clip = inset(0 62.5% 52% 30.5%)
      -webkit-clip-path $clip
      clip-path $clip
    &--right
      $clip = inset(0 30.5% 52% 62.5%)
      -webkit-clip-path $clip
      clip-path $clip

  &__grip
    --mirrored 0
    --size 250
    height calc(var(--size) * var(--unit))
    width calc(var(--size) * var(--unit))
    background var(--controller-white)
    // background orange
    border-radius 25% 20% 25% 25% / 25% 25% 25% 25%
    top 5%
    position absolute
    transform rotateY(calc(var(--mirrored) * 180deg)) rotate(-10.75deg)

    div:nth-of-type(1)
      background var(--controller-white)
      height 360%
      width 100%
      position absolute
      transform-origin top left
      transform rotate(19deg) translate(-26%, -8%)
      border-radius 95% 0 0 69%
      $clip = inset(7.78% 0 50% 0)
      -webkit-clip-path $clip
      clip-path $clip

    div:nth-of-type(2)
      background var(--controller-white)
      height 360%
      width 100%
      position absolute
      transform-origin top left
      transform rotate(19deg) translate(-26%, -12%)
      border-radius 100% 0 13% 60%/63% 0 25% 44%
      $clip = inset(50% 0 0 0)
      -webkit-clip-path $clip
      clip-path $clip

    div:nth-of-type(3)
      position absolute
      background var(--controller-white)
      height 200%
      width 15%
      left 0%
      top 230%
      transform-origin bottom center
      border-radius 100% / 50%
      transform rotate(32deg) translate(-671%, -32%)

    div:nth-of-type(4)
      position absolute


    &--left
      left 12%

    &--right
      --mirrored 1
      right 12%

  &__sticks-container
    position absolute
    left 50%
    top 25%
    width 85%
    height 76%
    overflow hidden
    transform translate(-50%, 0%)

  &__sticks
    height 38%
    width 60%
    background var(--controller-black)
    position absolute
    top 15%
    left 50%
    transform translate(-50%, 0)
    border-radius 19% / 50%

    & > div
      --lightness hsla(0, 0%, 65%, 0.15)
      position absolute
      height 100%
      width 38%
      top 0
      border-radius 50%

      &:before
        content ''
        background linear-gradient(-30deg, var(--lightness), transparent, var(--lightness))
        height 100%
        width 100%
        position absolute
        border-radius 50%
        filter blur(3px)

      &:after
        box-sizing border-box
        content ''
        height 90%
        width 90%
        position absolute
        border-radius 50%
        border calc(5 * var(--unit)) solid var(--lightness)
        filter blur(6px)
        top 50%
        left 50%
        transform translate(-50%, -50%)

    & > div:nth-of-type(1)
      left 0

    & > div:nth-of-type(2)
      right 0

      .controller__stick
        transform translate(-47%, -55%)

  &__stick
    height 82%
    width 82%
    background hsl(0, 0%, 15%)
    border-radius 50%
    position absolute
    top 50%
    left 50%
    transform translate(-53%, -55%)

    & > div:nth-of-type(1)
      border var(--unit) solid black
      height 85%
      width 85%
      transform translate(-50%, -50%)
      background linear-gradient(5deg, hsla(0, 0%, 100%, 0.1), hsl(0, 0%, 10%), hsla(0, 0%, 100%, 0.1), hsl(0, 0%, 10%), hsla(0, 0%, 100%, 0.1))
      position absolute
      border-radius 50%
      top 50%
      left 50%

      div
        height 95%
        width 95%
        background hsl(0, 0%, 10%)
        border-radius 50%
        position absolute
        transform translate(-50%, -50%)
        top 50%
        left 50%

    & > div:nth-of-type(2)
      background repeating-conic-gradient(hsla(0, 0%, 10%, 0.5) 1deg, hsla(0, 0%, 60%, 0.5) 6deg), #666
      filter blur(1px)
      border-radius 50%
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 75%
      height 75%
      box-shadow calc(-4 * var(--unit)) calc(2 * var(--unit)) calc(20 * var(--unit)) calc(2 * var(--unit)) hsla(0, 0%, 3%, 1) inset

      div
        position absolute
        top 50%
        left 50%
        background radial-gradient(circle at 80% 100%, hsl(0, 0%, 15%), transparent), hsl(0, 0%, 40%)
        transform translate(-50%, -50%)
        border-radius 50%
        width 60%
        height 60%
        box-shadow calc(1 * var(--unit)) calc(2 * var(--unit)) calc(13 * var(--unit)) calc(2 * var(--unit)) hsla(0, 0%, 100%, 0.35),
          calc(-5 * var(--unit)) calc(-2 * var(--unit)) calc(10 * var(--unit)) calc(8 * var(--unit)) hsl(0, 0%, 15%),
          calc(5 * var(--unit)) calc(4 * var(--unit)) calc(10 * var(--unit)) calc(8 * var(--unit)) hsl(0, 0%, 15%)

  &__backdrop
    height 60%
    width 100%
    background var(--controller-black)

  &__clip
    background var(--bg)
    width 65%
    height 50%
    position absolute
    top 50%
    left 50%
    transform translate(-50%, 3%)
    border-radius 15% 15% 0 0 / 22% 22% 0 0
    $clip = inset(0 0 80% 0)
    -webkit-clip-path $clip
    clip-path $clip

  &__grip-underlay
    --mirrored 0
    position absolute
    width 50%
    height 150%
    top 0
    transform rotateY(calc(var(--mirrored) * 180deg)) translate(-57%, -37%) rotate(10deg)

    &:before
      content ''
      position absolute
      bottom 0
      right 0
      background var(--controller-white)
      border-radius 50% / 50%
      height 40%
      width 4%
      transform-origin bottom center
      transform translate(-253%, 0%) rotate(12deg)

    &:after
      content ''
      position absolute
      bottom 0
      right 0
      background var(--controller-black)
      height 5%
      width 20%
      border-radius 0 0 4% 0 / 0 0 25% 0
      transform translate(-59%, -2%)


    div:nth-of-type(1)
      background var(--controller-white)
      position absolute
      bottom 0
      right 0
      width 100%
      height 100%
      $clip = polygon(0 0, 100% 0, 100% 70%, 85% 99.5%, 0 100%)
      -webkit-clip-path $clip
      clip-path $clip
    div:nth-of-type(2)
      background var(--controller-black)
      position absolute
      height 100%
      width 26%
      right 0
      bottom 0
      transform translate(44%, 23.5%) rotate(14deg)
      border-radius 100% 0 0 100%/50% 0 0 50%
      $clip = polygon(0 25%, 60% 25%, 54% 77%, 0 79%)
      -webkit-clip-path $clip
      clip-path $clip

      &:after
        content ''
        background var(--controller-white)
        position absolute
        bottom 0
        right 0
        width 50%
        height 61%
        border-radius 100% 0 0 100% / 50% 0 0 100%
    div:nth-of-type(3)
      background var(--controller-white)
      position absolute
      bottom 0
      width 10%
      height 7%
      right 21%
      z-index 2
      transform translate(0%, -3%) rotate(0deg)
      border-radius 0 0 65% 0 / 0 0 100% 0
    div:nth-of-type(4)
      position absolute
      background var(--controller-white)
      width 40%
      height 25%
      top 21%
      right -15%
      transform rotate(30deg) translate(-7%, -2%)
      border-radius 0 100% 0 0 / 0 64% 0 0

    &--left
      left 0

    &--right
      --mirrored 1
      right 0

  &__touch-pad
    --touch-pad-inset hsl(0, 5%, 65%)
    --touch-pad-fade hsla(0, 0%, 100%, 0.15)
    position absolute
    width 42%
    height 34.5%
    left 50%
    top 1.5%
    transform translate(-50%, 0)
    border-radius 50% 50% 0 0 / 8% 8% 0 0
    overflow hidden

    &:after
      content ''
      position absolute
      background linear-gradient(hsl(0, 0%, 70%), white, transparent)
      top 0
      left 50%
      width 95%
      height 30%
      transform translate(-50%, 0)
      border-radius 18% 18% 0 0 / 50% 50% 0 0
      opacity 0.5
      $clip = polygon(-2% 0, 102% 0, 98% 100%, 2% 100%)
      -webkit-clip-path $clip
      clip-path $clip

    & > div:nth-of-type(1)
      width 86%
      height 100%
      background var(--touch-pad-fade)
      left 50%
      position absolute
      transform translate(-50%, 0)
      border-radius 0 0 14% 14%/0 0 25% 25%

      &:before
        content ''
        position absolute
        bottom 0
        width 65%
        height 25%
        left 50%
        background var(--touch-pad-fade)
        transform translate(-50%, 0)

      &:after
        content ''
        position absolute
        bottom 0
        left 50%
        height 5%
        width 20%
        border-radius 50%
        background radial-gradient(white, transparent)
        filter blur(3px)
        transform translate(-50%, 50%)

      div
        --mirrored 0
        background var(--touch-pad-fade)
        position absolute
        height 100%
        width 15%
        border-radius 80% 0 0 90%/13% 0 0 30%
        overflow hidden
        transform rotateY(calc(var(--mirrored) * 180deg)) rotate(-11.5deg) translate(-23%, 2%)

        &:before
          content ''
          position absolute
          width 100%
          height 20%
          top 0
          left 0
          background var(--touch-pad-inset)
        &:after
          content ''
          position absolute
          top 8%
          left 0
          width 100%
          height 100%
          border-radius 50% 0 0 0 / 10% 0 0 0
          background linear-gradient(var(--accent) 15% 65%, transparent 85%)
      // left side
      div:nth-of-type(1)
        top 0
        left 0
      // right side
      div:nth-of-type(2)
        --mirrored 1
        top 0
        right 0

    & > div:nth-of-type(2)
      position absolute
      top 0
      left 50%
      height 94%
      width 81%
      background var(--controller-white)
      transform translate(-50%, 0)
      border-radius 0 0 15% 15%/0 0 25% 25%

      &:after
      &:before
        content ''
        position absolute
        top 0
        height 100%
        background var(--controller-white)
        width 15%

      &:before
        left 0
        border-radius 100% 0 0 85% / 12% 0 0 25%
        transform rotate(-12deg) translate(-27%, 0)

      &:after
        right 0
        border-radius 0 100% 85% 0 / 0 12% 25% 0
        transform rotate(12deg) translate(27%, 0)

  &__speaker
    position absolute
    top 39%
    left 50%
    display flex
    flex-direction row
    transform translate(-50%, 0)

    div
      --size 12
      background hsl(0, 0%, 5%)
      height calc(var(--size) * var(--unit))
      width calc(var(--size) * var(--unit))
      border-radius 50%
      box-shadow calc(-0.75 * var(--unit)) calc(0.5 * var(--unit)) calc(0.75 * var(--unit)) calc(0.5 * var(--unit)) inset hsla(0, 0%, 100%, 0.25)

      &:nth-of-type(odd)
        transform translate(0, -98%) scale(1.2)
      &:nth-of-type(even)
        transform translate(0, 70%) scale(1.2)

  &__start
    position absolute
    background linear-gradient(transparent 68%, hsla(0, 0%, 100%, 0.5) 70%, transparent 72%), #333
    top 57.5%
    left 50%
    border-radius 15% / 50%
    width calc(68 * var(--unit))
    height calc(var(--unit) * 18)
    transform translate(-50%, -50%)
    box-shadow 0 0 calc(0 * var(--unit)) calc(4 * var(--unit)) hsl(0, 0%, 0%),
      0 0 calc(0 * var(--unit)) calc(1 * var(--unit)) hsla(0, 0%, 100%, 0.5) inset

  &__headphone
    position absolute
    left 50%
    top 63.5%
    border-radius 50%
    width calc(20 * var(--unit))
    height calc(8 * var(--unit))
    background black
    transform translate(-50%, 0)

  &__buttons
    position absolute
    top 23.75%
    left 70.25%
    height calc(90 * var(--unit))
    width calc(90 * var(--unit))

  &__button
    height 100%
    width 100%
    border-radius 50%
    position absolute
    box-shadow 0 0 calc(4 * var(--unit)) calc(4 * var(--unit)) hsla(0, 0%, 45%, 0.35) inset
    border calc(2 * var(--unit)) solid hsl(0, 0%, 5%)

    &:after
    &:before
      content ''
      position absolute
      width 75%
      height 75%
      top 50%
      left 50%
      transform translate(-50%, -50%)

    &--square
      transform translate(0, 0)

      &:before
        width 55%
        height 55%
        border calc(4 * var(--unit)) solid hsl(0, 0%, 25%)

    &--triangle
      transform translate(108%, -108%)
      &:after
      &:before
        $clip = polygon(50% 0%, 100% 100%, 0 100%)
        -webkit-clip-path $clip
        clip-path $clip
      &:before
        height 60%
        width 65%
        background hsl(0, 0%, 25%)
        transform translate(-50%, -50%) translate(0, -16%)

      &:after
        background var(--controller-white)
        height 48%
        width 49%
        transform translate(-50%, -50%) translate(0, -16%)

    &--cross
      transform translate(108%, 108%)
      &:after
      &:before
        height calc(4 * var(--unit))
        background hsl(0, 0%, 25%)
        width 70%
      &:after
        transform translate(-50%, -50%) rotate(45deg)
      &:before
        transform translate(-50%, -50%) rotate(-45deg)

    &--circle
      transform translate(216%, 0%)
      &:before
        width 70%
        height 70%
        border-radius 50%
        border calc(4 * var(--unit)) solid hsl(0, 0%, 25%)
  &__dpad
    position absolute
    width calc(84 * var(--unit))
    height calc(100 * var(--unit))
    top 16%
    left calc(210 * var(--unit))

  &__dbutton
    position absolute
    height 100%
    width 100%
    background hsl(0, 0%, 40%)
    top 0
    left 0
    transform-origin bottom center
    $clip = polygon(0 0, 100% 0, 100% 25%, 93% 70%, 57% 100%, 50% 100%, 43% 100%, 7% 70%, 0 25%)
    -webkit-clip-path $clip
    clip-path $clip
    border-radius 35% 35% 0 0 / 27% 27% 0 0
    &--top
      transform translate(0, 0)
    &--right
      transform translate(0, 12%) rotate(90deg) translate(0, -14%)
    &--bottom
      transform translate(0, 12%) rotate(-180deg) translate(0, -14%)
    &--left
      transform translate(0, 12%) rotate(-90deg) translate(0, -14%)
    & > div
      background hsla(0, 0%, 95%, 0.75)
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      border-radius 35% / 27%
      width 85%
      height 85%
      $clip = polygon(0 0, 100% 0, 93% 70%, 57% 100%, 50% 100%, 43% 100%, 7% 70%)
      -webkit-clip-path $clip
      clip-path $clip

      &:after
      &:before
        content ''
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)

      &:before
        background var(--controller-white)
        height 90%
        background var(--controller-white)
        width 90%
        border-radius 35% / 27%
        $clip = polygon(0 0, 100% 0, 93% 70%, 57% 100%, 50% 100%, 43% 100%, 7% 70%)
        -webkit-clip-path $clip
        clip-path $clip

      &:after
        background hsl(0, 0%, 25%)
        top 26%
        width 28%
        height 14%
        $clip = polygon(0 100%, 50% 0, 100% 100%)
        -webkit-clip-path $clip
        clip-path $clip
  &__trigger
    --mirrored 0
    height calc(80 * var(--unit))
    width calc(254 * var(--unit))
    background var(--controller-black)
    position absolute
    transform translate(0%, 0) rotateY(calc(var(--mirrored) * 180deg)) translate(-13%, 3%) rotate(-11deg)
    border-radius 60% 50% 0 0 / 100% 100% 0 0
    $clip = polygon(19% 0, 9% 100%, 86% 100%, 86% 0)
    -webkit-clip-path $clip
    clip-path $clip
    overflow hidden

    &:after
    &:before
      content ''
      position absolute
      top 0
      left 50%

    &:before
      height 25%
      width 75%
      transform translate(-50%, 0)
      background linear-gradient(transparent 25%, hsla(0, 0%, 100%, 0.25))

    &:after
      height 75%
      top 25%
      width 100%
      transform translate(-50%, 0)
      background linear-gradient(90deg, transparent 0 19%, hsla(0, 0%, 100%, 0.5), transparent 45% 55%), linear-gradient(90deg, transparent 0 69%, hsla(0, 0%, 100%, 0.5), transparent 80%)

    &--left
      left 12%
    &--right
      --mirrored 1
      right 12%

  &__auxiliary-button
    --mirrored 0
    position absolute
    top 9%
    border calc(2 * var(--unit)) solid hsl(0, 0%, 15%)
    border-radius 50% / 30%
    background var(--controller-white)
    box-shadow 0 0 calc(2 * var(--unit)) calc(2 * var(--unit)) hsla(0, 0%, 45%, 0.5) inset
    height calc(62 * var(--unit))
    width calc(34 * var(--unit))
    transform rotateY(calc(var(--mirrored) * 180deg)) rotate(-12deg) translate(-18%, -4%)

    & > div
      position absolute
      top 0
      left 50%

    &--share
      left 26%

      & > div
        background hsl(0, 0%, 65%)
        height 24%
        width 10%
        transform-origin bottom center
        transform translate(50%, -200%) rotate(12deg)

        &:after
        &:before
          content ''
          position absolute
          bottom 0
          left 0
          height 70%
          width 100%
          background hsl(0, 0%, 65%)
          transform-origin 50% 220%

        &:before
          transform rotate(-33deg)
        &:after
          transform rotate(33deg)
    &--options
      --mirrored 1
      right 26%

      & > div
        background hsl(0, 0%, 65%)
        width 10%
        height 30%
        transform translate(0, -160%) rotate(102deg) translate(0, -22%)

        &:after
        &:before
          content ''
          position absolute
          bottom 0
          left 0
          height 100%
          width 100%
          background hsl(0, 0%, 65%)

        &:before
          transform translate(-250%, 0)
        &:after
          transform translate(250%, 0)

  &__logo
    position absolute
    top 50%
    left 50%
    width calc(90 * var(--unit))
    height calc(70 * var(--unit))
    transform translate(-50%, -74%)

    & > div:nth-of-type(2)
      height 96%
      width 22%
      background var(--controller-black)
      position absolute
      top 50%
      left 50%
      border calc(3 * var(--unit)) solid hsl(0, 0%, 5%)
      transform translate(-71%, -50%) skewY(15deg)

      &:after
      &:before
        content ''
        position absolute

      &:before
        left 108%
        top -5%
        width 150%
        height 62%
        background var(--controller-black)
        border calc(3 * var(--unit)) solid hsl(0, 0%, 5%)
        border-radius 0 50% 50% 0

      &:after
        left 0%
        width 230%
        box-shadow 0 0 calc(2 * var(--unit)) calc(2 * var(--unit)) hsla(0, 0%, 100%, 0.5) inset
        height 20%
        background var(--controller-black)
        border-radius 0 30% 0 0 / 0 100% 0 0
        $clip = polygon(0 0, 100% 0, 100% 80%, 0 30%)
        -webkit-clip-path $clip
        clip-path $clip

    & > div:nth-of-type(1)
      position absolute
      height 38%
      transform-origin bottom center
      width 122%
      bottom 0
      left 32%
      transform skewX(62deg) rotate(-13deg) translate(-2%, -21%)

      div:after
        content ''
        position absolute
        top 50%
        left 50%
        width 70%
        height 25%
        background hsl(0, 0%, 5%)
        // box-shadow 0 0 calc(1 * var(--unit)) calc(1 * var(--unit)) hsla(0, 0%, 100%, 0.5) inset
        transform translate(-50%, -50%)
        border-radius 25% / 50%

      div:nth-of-type(1)
        height 54%
        background var(--controller-black)
        position absolute
        top 45%
        width 100%
        $clip = polygon(57% 0, 100% 0, 100% 100%, 19% 100%)
        -webkit-clip-path $clip
        clip-path $clip
        border-radius 25% / 50%
        box-shadow calc(-1 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit)) rgba(255,255,255,0.5) inset
        border calc(2.5 * var(--unit)) solid hsl(0, 0%, 5%)

      div:nth-of-type(2)
        border calc(2 * var(--unit)) solid hsl(0, 0%, 5%)
        top 2%
        width 100%
        left 2%
        position absolute
        box-shadow calc(-1 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit)) rgba(255,255,255,0.5) inset
        height 58%
        background var(--controller-black)
        border-radius 35% / 50%
        $clip = polygon(0 0, 85% 0, 40% 100%, 0% 100%)
        -webkit-clip-path $clip
        clip-path $clip
  &__mute
    position absolute
    width calc(20 * var(--unit))
    height calc(20 * var(--unit))
    top 60%
    left 50%
    transform translate(-50%, 0)

    & > div:nth-of-type(1)
      position absolute
      top 38%
      left 50%
      width 62%
      height 36%
      background hsl(0, 0%, 50%)
      border-radius 0 0 25% 25% / 0 0 50% 50%
      transform translate(-50%, 0)

      &:after
      &:before
        content ''
        position absolute

      &:before
        height 200%
        width 80%
        background hsl(0, 0%, 50%)
        border var(--unit) solid var(--controller-black)
        border-radius 25%
        position absolute
        left 50%
        top 0
        transform translate(-50%, -60%)

      &:after
        width 150%
        height 50%
        border-radius 25% / 25%
        background hsl(0, 0%, 50%)
        border var(--unit) solid var(--controller-black)
        top 50%
        left 50%
        transform translate(-50%, -159%) rotate(45deg)

    & > div:nth-of-type(2)
      position absolute
      bottom 0
      left 50%
      background hsl(0, 0%, 50%)
      transform translate(-50%, 0)
      width 60%
      height 15%
      border-radius 25%

      &:after
        content ''
        left 50%
        bottom 0
        height 200%
        background hsl(0, 0%, 50%)
        width 25%
        position absolute
        transform translate(-50%, 0)
        
  &__patch
    --mirrrored 0
    position absolute
    bottom 1.5%
    height 25%
    width 7%
    background var(--controller-white)
    border-radius 50%/50%
    transform-origin bottom center
    
    &--left
      left 4%
      transform rotate(6deg)
    
    &--right
      right 4%
      transform rotate(-6deg)

// 404