:root {
  --size: 32px;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #1a2b3c;
}

label {
  padding: 3em;
  color: white;
  display: block;
  font-size: 18px;
  font-family: sans-serif;
  position: absolute;
}

main {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  
  & button {
    font-size: var(--size);
    appearance: none;
    background: transparent;
    padding: 1em 2em;
    border-radius: 100px;
    border: 1px solid;
    color: white;
    position: relative;
    overflow: hidden;
    transition: color .40s ease;
    
    &:hover {
      color: black;
    }
    /* Now, the fun part :D */
    
    & .btn-content {
      pointer-events: none;
      position: relative;
      z-index: 3;
    }
    
    & .btn-cells {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(10, 1fr); /* Make 5 columns for the spans */
        grid-auto-rows: 1fr; /*each line got the same height */
        overflow: hidden;
      
        & span {
          width: 100%;
          height: 100%;
          display: block;
          position: relative;         
          
          &:before {
            content: "";
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            background: #51f0ed;
            background-image: linear-gradient(to right, #51F0ED, color-mix(in srgb, #51F0ED, white 50%));
            transition: transform .4s ease;
            transform: scale(0);
            border-radius: 100px;
          }
         
          &:hover:before {
           transform: scale(12) 
          }
          
          &:hover {
            & ~:not(:hover) {
              pointer-events: none
            }
          }
          
          /* Debug*/
          
           body:has(label[for="debug"] input:checked) & {
            border: 1px solid red;
            
            &:before {
              background: green;
            }
          }
        }
      }
    }
  }
}