﻿.menupanel {
  position: fixed;
  overflow-y: auto;
  top: 64px;
  left: 0;
  width: 360px;
  padding: 4px 8px 8px 8px;
  height: calc(100dvh - 64px);
  background-color: #232323E0;
  backdrop-filter: blur(16px) saturate(250%);
  z-index: 1001;
}

.menupanel-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.267s cubic-bezier(0.1, 0.9, 0.4, 1.0);
}

.menupanel-closed {
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s cubic-bezier(0.2, 0.0, 0.9, 0.0), visibility 0s linear 0.2s;
}

@media (max-width: 600px) {
  .menupanel {
    width: 100%;
  }
}
