:root{
  --drawer-offset:.5em;
  --drawer-width:500px;
}

yc-drawer .drawer-btn{
  color:currentColor;
  border-color:color-mix(in srgb, currentColor 20%, transparent);
}
yc-drawer .drawer-box{
  position:fixed;
  z-index:100;
  inset:0;
  margin:.5em;
  margin:var(--drawer-offset);
  width:500px;
  width:var(--drawer-width);
  inset-inline-start:calc(500px * -1 - .5em * 2);
  inset-inline-start:calc(var(--drawer-width) * -1 - var(--drawer-offset) * 2);
  border-radius:var(--drawer-border-radius);
  overflow:hidden;
  transition:var(--transition-duration-normal);
}
yc-drawer .drawer-overlay{
  opacity:0;
  visibility:hidden;
}
yc-drawer[data-direction$=rtl] .drawer-box{
  inset-inline-start:100%;
}
yc-drawer[data-hidden$=false][data-direction$=rtl] .drawer-box{
  inset-inline-start:calc(100% - 500px - .5em * 2);
  inset-inline-start:calc(100% - var(--drawer-width) - var(--drawer-offset) * 2);
}
yc-drawer[data-hidden$=false] .drawer-box{
  inset-inline-start:0%;
}
yc-drawer[data-hidden$=false] .drawer-overlay{
  opacity:1;
  visibility:visible;
}
yc-drawer#menu{
  display:none;
}

@media (max-width: 1024px){
  yc-drawer#menu{
    display:inline;
    display:initial;
  }
}
@media (max-width: 768px){
  :root{
    --drawer-width:85%;
  }
  yc-drawer#cart .cart-btn .total-amount,
  yc-drawer#cart .cart-btn::before{
    display:none;
  }
}