OffCanvas.css

.offcanvas {
  background-color: var(--pico-accent-bg-color, #222);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, z-index 0.3s ease-in-out;
  z-index: -10;
  opacity: 0;
  width: 18.75rem;
  height: 100vh;
  top: 0;
  position: fixed;
}
.offcanvas[data-direction=left] {
  left: -18.75rem;
  transform: translateX(0);
}
.offcanvas[data-direction=right] {
  right: -18.75rem;
  transform: translateX(0);
}
.offcanvas[data-direction=top] {
  top: -18.75rem;
  left: 0;
  width: 100vw;
  height: 18.75rem;
  transform: translateY(0);
}
.offcanvas[data-direction=bottom] {
  bottom: -18.75rem;
  left: 0;
  top: unset;
  width: 100%;
  height: 18.75rem;
  transform: translateY(0);
}
.offcanvas.open {
  display: block;
  z-index: 1050;
  opacity: 1;
}
.offcanvas.open[data-direction=left] {
  transform: translateX(18.75rem);
}
.offcanvas.open[data-direction=right] {
  transform: translateX(-18.75rem);
}
.offcanvas.open[data-direction=top] {
  transform: translateY(18.75rem);
}
.offcanvas.open[data-direction=bottom] {
  transform: translateY(-18.75rem);
}
.offcanvas .offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--pico-accent-section-bg-color, #333);
  color: var(--pico-color, #fff);
}
.offcanvas .offcanvas-body {
  padding: 1rem;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -100;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, width 0.3s ease-in-out;
}

.offcanvas-open .offcanvas-backdrop {
  opacity: 1;
  z-index: 100;
  width: 100vw;
  height: 100vh;
}

/*# sourceMappingURL=OffCanvas.css.map */