/* Reusable custom popup/drawer state. Layout stays in block/Tailwind classes. */

.cpop-wrapper:not([role]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s linear, visibility .3s linear;
}

.cpop-wrapper:not([role]):not([aria-hidden="false"]) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
Panel open-state and transition should live on the .cpop-panel block/Tailwind classes.
*/

.cpop-wrapper:not([role]) .cpop-panel {
  /* transform: translateY(0); */
  /* transform: translateX(0); */
  transition: translate .3s cubic-bezier(.38, .41, .27, 1);
}

/* .cpop-wrapper:not([role]):not([aria-hidden="false"]) .cpop-panel {
  transform: translateY(100%);
}  
*/
  
/* Right-side drawer variation. Swap with the bottom drawer rule above when needed. */
/*
.cpop-wrapper:not([role]):not([aria-hidden="false"]) .cpop-panel {
  transform: translateX(100%);
}
*/