@layer base{
  :root{
    --toast_pogress_color : 217, 80%, 58%;
  }
  
  
  .toast {
      box-sizing: border-box;
      /* padding: .75rem; */
      
      /* border: 1px solid #333; */
      border-radius: .25em;
      position: relative;
     
      transition:transform 300ms ease-in-out;
      /* overflow: hidden; */
  
      /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); */
    }

    .toast::-webkit-scrollbar{width:0}
  
  
    
    
    .toast-container[data-position$="-right"] .toast {
      transform: translateX(110%);
     
    }
    
    .toast-container[data-position$="-left"] .toast {
      transform: translateX(-110%);
    }
    /* .toast-container[data-position="top-center"]{z-index: 1;} */
    .toast-container[data-position="top-center"] .toast {
      transform: translateY(-100vh);
      margin-top:20px;
    }
    
    .toast-container[data-position="bottom-center"] .toast {
      transform: translateY(100vh);
    }
  
  
   
  
    
    .toast-container .toast.show {
      transform: translate(0, 0);
    }
    
    .toast.progress::before {
      content: "";
      position: absolute;
      height: 2px;
      width: calc(100% * var(--progress));
      background-color:hsl(var(--toast_pogress_color));
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
    }
    
    .toast.can-close:not(.toast-popup)::after {
      content: "\00D7";
      position: absolute;
      top: 2px;
      right: 5px;
      cursor: pointer;
    }
    
    .toast-container {
      position: fixed;
      /* margin: 10px; */
      min-width: 250px;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      z-index:9;
    }
  
  
  
  
    
    .toast-container[data-position^="top-"] {
      top: 0;
    }
    
    .toast-container[data-position^="bottom-"] {
      bottom: 0;
    }
    
    .toast-container[data-position$="-right"] {
      right: 0;
      z-index: 12;
    }
    
    .toast-container[data-position$="-left"] {
      left: 0;
    }
    
  
  
    .toast-container[data-position= "middle_t-center"] .toast{
      top:-50%;
      translate : 0 30vh;
  
      animation: toast;
      animation-duration:0.5s;
    }
  
    .toast-container[data-position= "middle_t-center"] .toast:not(.show){
      top:-50%;
      translate : 0 40vh;
  
      animation: toast2;
      animation-duration: 0.5s;
    }
  
    @keyframes toast{
      from{ translate : 0 0vh;}
      to{
        translate : 0 30vh;
      }
      
    }
  
    @keyframes toast2{
      from{ translate : 0 30vh;}
      to{
        translate : 0 -30vh;
      }
      
    }
  
  
      .toast-container[data-position$="-center"] {
          left: 50%;
          transform: translateX(-50%);
          
        }
  
  
        .toast_container_overlay{
          --rgba : 0,0,0,.9;
          position:fixed;
          top:0px;
          left:0;
          width: 100vw;
          height: 100vh;
          background-color:rgba(var(--rgba));
         
          z-index: 10;
      }
  
  
      .toast-close{
        position:absolute;
        right:0px;
        padding : 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        cursor: pointer;
    }

    .modal {
       
    }
}