nav {

    position: fixed;
    left: 50%;
    bottom: calc(var(--gap)*.5);
    translate: -50% 0;
    transform-origin: left;
    width: 95%;
    height: 8svh;
    border-radius: 100vh;
    z-index: 9999;
    background: hsl(from var(--foreground) h s l / .75);
    backdrop-filter: blur(5px);
    display: grid;
    place-content: center;
    

    .nav-wrapper {
        inset: 0;
        padding: calc(var(--gap)*.25) calc(var(--gap)*2);
    
        .main-nav{
            display: grid;
            place-content: center;
        
            ul{
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: calc(var(--gap)*6);
                list-style: none;
                padding: calc(var(--gap)*.5) calc(var(--gap)*.5);
        
                li{
                    cursor: pointer;
                    background: hsl(from var(--surface) h s l /.125);
                    border-radius: 100vh;
                    padding: calc(var(--gap) * .5) calc(var(--gap) * 1);
                    transition: all 350ms cubic-bezier(0.56, -0.43, 1, 1.55);
                    display: grid;
                    grid-template-columns: 1fr;
        
                    &:hover{
                        background: hsl(from var(--surface) h s l /.5);
                    }

                    svg{
                        vertical-align: middle;
                        width: 2rem;
                        height: 2rem;
                        fill: var(--text-bright);
                    }

                    span{
                        display: none;
                    }
                }                
            }
          }
      }
  }


@media (width > 50em){
    nav {
        position: fixed;
        left: 2%;
        top: 50%;
        translate: 0 -50%;
        transform-origin: left;
        width: fit-content;
        height: fit-content;
        border-radius: calc(var(--border-radius) * 3) !important;
        padding: calc(var(--gap) * .5) calc(var(--gap) * .5);
        z-index: 9999;
        transition: all 250ms cubic-bezier(0.56, -0.43, 1, 1.55);
        scale: .75;
    
        .nav-wrapper {
            inset: 0;
            padding: calc(var(--gap)*.5) calc(var(--gap)*.25);
            
        
            .main-nav{
                display: grid;
                place-content: center;
            
                ul{
                    display: grid;
                    grid-template-columns: 1fr;
                    place-content: center;
                    gap: calc(var(--gap)*1);
                    list-style: none;
                    padding: calc(var(--gap)*.5) calc(var(--gap)*.5);
            
                    li{
                        cursor: pointer;
                        background: hsl(from var(--surface) h s l /.125);
                        border-radius: 100vh;
                        padding: calc(var(--gap) * .5);
                        transition: all 350ms cubic-bezier(0.56, -0.43, 1, 1.55);
                        display: grid;
                        grid-template-columns: 1fr;
            
                        &:hover{
                            background: hsl(from var(--surface) h s l /.5);
                        }
                    }
                }
              }
          }

          
      }


      nav:hover{
        border-radius: calc(var(--border-radius) * 3.5);
        padding: calc(var(--gap) * 2) calc(var(--gap) * 2);
        scale: 1;
    
        .nav-wrapper {
            
        
            .main-nav{
            
                ul{
                    gap: calc(var(--gap)*2);

                    li{
                        span{
                            display: inline-block;
                            text-decoration: none;
                            color: var(--surface);
                            margin-inline-start: var(--gap);
                            transition-behavior: allow-discrete
                        }
                    }
                }
              }
          }
        
      }
}