/* ------------------------------
Changing the sliding in animation
------------------------------ */

/* NOTES: 
/* Edit the '--slideout-animation' and '--slideout-position' variables to change the position */

[data-slideout-panel] {
  --slideout-animation: left .2s ease-in-out;
  --slideout-background: #fff;
  --slideout-shadow-color: #9ca3af;
  --slideout-padding: 1rem;
  --slideout-position: -100%;
  --slideout-size: 33vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--slideout-position); 
  z-index: 9999;
  /* right: 0;  */
  visibility: hidden; 
  width: var(--slideout-size);
  padding: var(--slideout-padding);
  background: var(--slideout-background);
  box-shadow: 0 4px 20px var(--slideout-shadow-color);
  transition: var(--slideout-animation);
}

[data-slideout-panel].is-active {
  --slideout-position: 0;
  visibility: visible;
}

[data-slideout-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-slideout-close] {
  color: var(--cssui-gray-darkest);
}