@layer base{


    .nav-bar .option{  white-space: nowrap;cursor: pointer;}
.nav-y .icon{position:absolute; width: 100%;height: 80px;z-index: 5;align-items: center;}
.nav-x .icon{position:absolute; width: 60px;height: 100%;z-index: 5;align-items: center;}


.nav-y .icon:nth-child(1) i{transform: rotate(90deg);}
.nav-y .icon:last-child i{transform: rotate(-90deg);}

.nav-x .icon:last-child i {transform: rotate(180deg) ;}

.nav-bar .icon i{
   width: 100%;
   
    cursor: pointer;
    color: #575757;
    font-size: 1.2rem;
    text-align: center;
    
   
    display: flex;
    align-items: center;
    position: relative; 
    
}

.nav-x .icon:first-child i{text-align: left;margin-left: 5px;}
.nav-x .icon:last-child i{text-align: left;margin-right: 5px;}

.nav-y .icon:first-child{top:-5px; display: none;}
.nav-y .icon:last-child{bottom: -5px;}

.nav-x .icon:first-child{left:-5px;background: linear-gradient(90deg, hsl(var(--color)) 50%, transparent);z-index:-1;}
/* .nav-x .icon:first-child{left:-5px;box-shadow: 0 50px 50px rgba(0, 0, 0, 0.2);} */
.nav-x .icon:last-child{right:-5px;background: linear-gradient(-90deg, hsl(var(--color)) 50%, transparent);z-index:-1;
  /* background: linear-gradient(-90deg, #fff 50%, transparent); */
}

.nav-bar .icon{cursor: pointer;}

.nav-bar .options{scroll-behavior: smooth;overflow: hidden;user-select: none;  gap:12px;overflow: hidden;outline: none;border: none;}


.nav-bar .options.dragging{
    cursor: grab;
    scroll-behavior: auto;
  }
.nav-bar .option{user-select: none;}
  .navbar .options.dragging .option{
    
    pointer-events: none;
  }


}