.menu {
  display: flex;
  position: absolute;
  flex-direction: column;
  padding: var(--hs-spacing-base) 0;
  opacity: 0;
  min-width: 100px;
  max-height: 70vh;
  overflow-x: auto;
  border-radius: var(--hs-radius-boxes);
  box-shadow: var(--hs-shadow-dark);
  pointer-events: none;
  background-color: var(--hs-color-menu-bg);
  z-index: 30;
  top: 0;
  left: 0;
}

.menu--transition {
  transition-property: opacity;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

.menu.menu--open,
.menu.menu--persist {
  opacity: 1;
  pointer-events: all;
}

.menu.menu--persist {
  display: block;
}

.menu--closed {
  display: none;
}

.menu__item,
.menu__item.button-base {
  display: flex;
  align-items: center;
  color: var(--hs-color-menu-fg);
  height: 3.6rem;
  padding: 0 var(--hs-spacing-large);
  font-size: var(--hs-typography-base-size);
  transition-property: color, background-color;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

.menu__item:hover {
  color: var(--hs-color-menu-fg_hover);
  background-color: var(--hs-color-menu-bg_hover);
}

.menu__blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}