<div id="bg-0" class="bg-item" style="top: 0; right: 0; bottom: 0; left: 0;">
  <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect y="0.4375" width="100%" height="100%" fill="#AB61E4"/>
  </svg>
</div>

<div id="bg-1" class="bg-item" style="bottom: 0; left: 0;">
  <svg width="371" height="476" viewBox="0 0 371 476" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M371 0H-60V538H371V0Z" fill="#F56CF0"/>
  </svg>
</div>

<div id="bg-2" class="bg-item" style="bottom: -15%; right: calc(35% - 217px);">
  <svg width="478" height="430" viewBox="0 0 478 430" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M523 0H0V480H523V0Z" fill="#D2578B"/>
  </svg>
</div>

<div id="bg-3" class="bg-item" style="bottom: 20%; left: 15%;">
  <svg width="254" height="211" viewBox="0 0 254 211" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M254 0H0V211H254V0Z" fill="#F56CF0"/>
  </svg>
</div>

<div id="bg-4" class="bg-item" style="top: 0; right: 0; bottom: 0;">
  <svg width="332" height="600" viewBox="0 0 332 600" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M338.5 -169L676.68 26V416L338.5 611L0.316986 416V26L338.5 -169Z" fill="#AB61E4"/>
  </svg>
</div>

<div id="bg-5" class="bg-item" style="bottom: 20%; right: 3%;">
  <svg width="299" height="344" viewBox="0 0 299 344" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M149.5 0L298.889 86V258L149.5 344L0.110992 258V86L149.5 0Z" fill="#AB61E4"/>
  </svg>
</div>

<div id="bg-6" class="bg-item" style="top: 0; left: calc(50% - 281px);">
  <svg width="563" height="393" viewBox="0 0 563 393" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M281.5 393C436.968 393 563 270.774 563 120C563 -30.7737 436.968 -153 281.5 -153C126.032 -153 0 -30.7737 0 120C0 270.774 126.032 393 281.5 393Z" fill="#7A8DF4"/>
  </svg>
</div>

<div id="bg-7" class="bg-item" style="top: 0; left: 0">
  <svg width="454" height="329" viewBox="0 0 454 329" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M46.5 -377L453.965 328.75H-360.965L46.5 -377Z" fill="#9879F0"/>
  </svg>
</div>

<div id="bg-8" class="bg-item" style="top: 15%; left: 0;">
  <svg width="590" height="330" viewBox="0 0 590 330" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M-11 18L141 281H-163L-11 18Z" fill="#9879F0"/>
  <path d="M590 0H413V330H590V0Z" fill="#9879F0"/>
  </svg>
</div>

<div id="bg-9" class="bg-item" style="top: 32%; left: 36%;">
  <svg width="174" height="237" viewBox="0 0 174 237" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M174 0H0V237H174V0Z" fill="#F56CF0"/>
  </svg>
</div>

<div id="bg-10" class="bg-item" style="top: 0; left: calc(50% - 182px);">
  <svg width="364" height="234" viewBox="0 0 364 234" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M182 234C282.516 234 364 152.516 364 52C364 -48.5158 282.516 -130 182 -130C81.4842 -130 0 -48.5158 0 52C0 152.516 81.4842 234 182 234Z" fill="#7A8DF4"/>
  </svg>
</div>

<main class="calculator-wrapper">
  <div class="title-wrapper">
    <div class="title">Glassmorphism</div>
    <div class="title">Glassmorphism</div>
  </div>
  
  <section class="calculator">
    <button id="toggler" class="toggle-theme">
      <svg id="dark" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" style="display: block;">
        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
      </svg>
      <svg id="light" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" style="display: none;">
        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
      </svg>
    </button>
    <header class="calculator-header">
      <div class="calculator-operation">5874 + 2547</div>
      <div class="calculator-operation-result">7,895</div>
    </header>
    <main class="calculator-body">
    </main>
    <div class="calculator-button-wrapper">
      <button type="button" class="calculator-button">
        <span>C</span>
      </button>
      <button type="button" class="calculator-button">
        <span>
          <svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 10C5 9.83424 5.06585 9.67527 5.18306 9.55806C5.30027 9.44085 5.45924 9.375 5.625 9.375H14.375C14.5408 9.375 14.6997 9.44085 14.8169 9.55806C14.9342 9.67527 15 9.83424 15 10C15 10.1658 14.9342 10.3247 14.8169 10.4419C14.6997 10.5592 14.5408 10.625 14.375 10.625H5.625C5.45924 10.625 5.30027 10.5592 5.18306 10.4419C5.06585 10.3247 5 10.1658 5 10Z" fill="currentColor"/>
            <circle cx="10" cy="7" r="1" fill="currentColor"/>
            <circle cx="10" cy="13" r="1" fill="currentColor"/>
          </svg>
        </span>
      </button>
      <button type="button" class="calculator-button">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
          <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
        </svg>
        </span>
      </button>
      <button type="button" class="calculator-button">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-eraser-fill" viewBox="0 0 16 16">
            <path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/>
          </svg>
        </span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>7</span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>8</span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>9</span>
      </button>
      <button type="button" class="calculator-button">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
            <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
          </svg>
        </span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>4</span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>5</span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>6</span>
      </button>
      <button type="button" class="calculator-button">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
          </svg>
        </span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>1</span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>2</span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>3</span>
      </button>
      <button type="button" class="calculator-button equal">
        <span>
          <svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.00006 8.625C5.00006 8.45924 5.06591 8.30027 5.18312 8.18306C5.30033 8.06585 5.4593 8 5.62506 8H14.3751C14.5408 8 14.6998 8.06585 14.817 8.18306C14.9342 8.30027 15.0001 8.45924 15.0001 8.625C15.0001 8.79076 14.9342 8.94973 14.817 9.06694C14.6998 9.18415 14.5408 9.25 14.3751 9.25H5.62506C5.4593 9.25 5.30033 9.18415 5.18312 9.06694C5.06591 8.94973 5.00006 8.79076 5.00006 8.625Z" fill="currentColor"/>
            <path d="M5.00006 12.25C5.00006 12.0842 5.06591 11.9253 5.18312 11.8081C5.30033 11.6908 5.4593 11.625 5.62506 11.625H14.3751C14.5408 11.625 14.6998 11.6908 14.817 11.8081C14.9342 11.9253 15.0001 12.0842 15.0001 12.25C15.0001 12.4158 14.9342 12.5747 14.817 12.6919C14.6998 12.8092 14.5408 12.875 14.3751 12.875H5.62506C5.4593 12.875 5.30033 12.8092 5.18312 12.6919C5.06591 12.5747 5.00006 12.4158 5.00006 12.25Z" fill="currentColor"/>
          </svg>
        </span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-percent" viewBox="0 0 16 16">
            <path d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
          </svg>
        </span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>0</span>
      </button>
      <button type="button" class="calculator-button highlight">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-dot" viewBox="0 0 16 16">
            <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
          </svg>
        </span>
      </button>
    </div>
  </section>
  
  <div class="calculator-back"></div>
</main>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: #AB61E4;
  min-height: 100vh;
  overflow: hidden;
  
  color: #fff;
}

.calculator {
  --header-bg:                    rgba(255,255,255,.2);
  --body-bg:                      rgba(255,255,255,.3);
  --button-bg:                    rgba(255,255,255,.2);
  --button-bg-hover:              rgba(255,255,255,.3);
  --button-highlight-bg:          rgba(255,255,255,.5);
  --button-highlight-bg-hover:    rgba(255,255,255,.3);
  transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;

  position: relative;
  width: 280px;
  box-shadow: rgb(24 32 79 / 25%) 0px 40px 80px, rgb(255 255 255 / 50%) 0px 0px 0px 0.5px inset;
  border-radius: 15px;
  z-index: 10;
  
  &:hover {
    margin-bottom: 5px;
    ~ .calculator-back {
      transform: skewY(18deg);
      width: 35%;
    }
  }
  
  &.dark {
    --header-bg:                    rgba(2,14,39,.2);
    --body-bg:                      rgba(2,14,39,.3);
    --button-bg:                    rgba(2,14,39,.2);
    --button-bg-hover:              rgba(255,255,255,.1);
    --button-highlight-bg:          rgba(2,14,39,.5);
    --button-highlight-bg-hover:    rgba(255,255,255,.15);
  }
  &-header {
    position: relative;
    background-color: var(--header-bg);
    padding: 30px 30px 15px 30px;
    text-align: right;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    backdrop-filter: blur(40px);
    box-shadow: inset 0px 2px 1px rgba(#fff, .1)
  }
  &-body {
    position: relative;
    background-color: var(--body-bg);
    padding: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    backdrop-filter: blur(20px);
    min-height: 250px;
  }
  
  &-operation {
    font-size: 18px;
    margin-bottom: 4px;
    &-result {
      font-size: 42px;
      font-weight: bold;
    }
  }
  
  &-button {
    position: relative;
    display: block;
    height: 100%;
    border: 1px solid transparent;
    background-color: var(--button-bg);
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    border: 1px solid rgba(#fff, 0);
    user-select: none;
    backdrop-filter: blur(6px);
    transition: all .2s ease-in-out;
    will-change: auto;
    z-index: 2;
    &:hover, &:focus {
      box-shadow: 0px 10px 25px rgba(4, 37, 100, 0.12);
      border-radius: 4px;
      background-color: var(--button-bg-hover);
      border-color: rgba(#fff, .15);;
      z-index: 5;
      transform: scale(1.35);
    }
    &:focus {
      outline: none;
    }
    
    &.equal {
      grid-row-start: span 2;
      grid-column-start: 4;
    }
    &.highlight {
      background-color: var(--button-highlight-bg);
      &:hover, &:focus {
        background-color: var(--button-highlight-bg-hover);
      }
    }
    &-wrapper {
      position: absolute;
      top: calc(117px + 15px);
      right: 15px;
      bottom: 15px;
      left: 15px;
      display: grid;
      grid-gap: 2px;
      grid-template-columns: repeat(4, auto);
      grid-template-rows: repeat(5, 45px);
    }
  }
  &-back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 85%;
    background-image: linear-gradient(rgb(189, 29, 140) 0%, rgb(122, 65, 206) 100%);
    border-radius: 15px;
    transform: skewY(8deg);
    transform-origin: left top;
    transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
    z-index: 5;
  }
  
  &-wrapper {
    position: relative;
  }
}

.title {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: calc(62px + 1vw);
  font-weight: 900;
  color: rgba(31, 62, 90, 1);
  letter-spacing: -.065em;
  user-select: none;
  &:nth-child(2) {
    mix-blend-mode: screen;
    opacity: .75;
  }
  
  &-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    transform: rotate(-90deg) translate(-80px, -65px);
    
    // mix blend mode not working with backdrop-filter in the same viewport (chrome)
    mix-blend-mode: difference;
    // add "backdrop-filter" to fix:
    backdrop-filter: opacity(1);
    
    z-index: 10;
  }
}

.bg-item {
  position: absolute;
}

.toggle-theme {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  padding: 8px 12px;
  background-color: var(--button-bg);
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #fff;
  cursor: pointer;
  border: none;
  outline: none;
  will-change: auto;
  backdrop-filter: blur(4px);
  transition: all .1s ease-in-out;
  z-index: 5;
  &:hover, &:focus {
    box-shadow: 0px 10px 25px rgba(4, 37, 100, 0.12);
    border: 1px solid rgba(#fff, .2);
    background-color: var(--button-bg-hover);
    border-color: rgba(#fff, .08);
    transform: scale(1.25);
  }
}

#bg-1 {filter: blur(10px)}
#bg-2 {filter: blur(36px)}
#bg-4 {filter: blur(50px)}
#bg-6 {filter: blur(40px)}
#bg-7 {filter: blur(30px)}
#bg-9 {filter: blur(20px)}

let $toggler = document.getElementById('toggler'),
    $calculator = document.querySelector('.calculator');

if($calculator.classList.contains('dark')) {
  $toggler.querySelector('#light').style.display = 'block';
  $toggler.querySelector('#dark').style.display = 'none';
} else {
  $toggler.querySelector('#light').style.display = 'none';
  $toggler.querySelector('#dark').style.display = 'block';
}

$toggler.addEventListener('click', function() {
  $calculator.classList.toggle('dark');
  
  if($calculator.classList.contains('dark')) {
    $toggler.querySelector('#light').style.display = 'block';
    $toggler.querySelector('#dark').style.display = 'none';
  } else {
    $toggler.querySelector('#light').style.display = 'none';
    $toggler.querySelector('#dark').style.display = 'block';
  }
})