cl-cart[type=mini]{
  --cl-cart-mini-backdrop-bg: #000;
  --cl-cart-mini-backdrop-opacity: 0.4;
  --cl-cart-mini-backdrop-shadow: -1px 0px 10px rgba(0, 0, 0, .3);
  --cl-cart-mini-modal-z-index: 100;
  --cl-cart-mini-modal-bg: #fff;
  --cl-cart-mini-modal-width: 400px;
  --cl-cart-mini-modal-max-width: calc(100vw - 40px);
  --cl-cart-mini-transition-duration: .3s;
  --cl-cart-mini-transition-timing-function: ease-in-out;
  display:flex;
  cursor:auto;
  position:fixed;
  z-index:var(--cl-cart-mini-modal-z-index);
  top:0;
  width:var(--cl-cart-mini-modal-width);
  max-width:var(--cl-cart-mini-modal-max-width);
  height:100%;
  pointer-events:none;
  box-sizing:border-box;
  box-shadow:none;
  transition:box-shadow var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}

cl-cart[type=mini]::before,cl-cart[type=mini]::after{
  position:fixed;
  content:" ";
  opacity:0;
  width:100%;
  height:100%;
  top:0;
  right:0;
  z-index:-1;
  transition:opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}

cl-cart[type=mini]::before{
  background:var(--cl-cart-mini-backdrop-bg)
}

cl-cart[type=mini]::after{
  position:fixed;
  width:var(--cl-cart-mini-modal-width);
  max-width:var(--cl-cart-mini-modal-max-width);
  box-shadow:var(--cl-cart-mini-backdrop-shadow)
}

cl-cart[type=mini],cl-cart[type=mini]::after{
  right:calc(var(--cl-cart-mini-modal-width)*-1 + 0px);
  transition:right var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function),opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
}

cl-cart[type=mini][open]:not([open=false]){
  right:0;
  pointer-events:initial
}

cl-cart[type=mini][open]:not([open=false])::before{
  opacity:var(--cl-cart-mini-backdrop-opacity)
}

cl-cart[type=mini][open]:not([open=false])::after{
  right:0;
  opacity:1
}

body.cl-cart--open{
  overflow:hidden
}