.xh-menu {
  position: fixed;
  margin: 0 !important;
  z-index: 21;
  /**
   * Use `dvh` units allows the viewport to dynamically adjust based on presence of browser UI elements, which is preferred to using `vh` on mobile.
   * Including `px` units as a fallback for older browsers that may not support `vh`/`dvh` units.
   * https://css-tricks.com/the-large-small-and-dynamic-viewports/
   */
  max-height: 500px;
  max-height: 80dvh;

  &__title {
    padding: var(--xh-pad-half-px);
    color: var(--xh-appbar-title-color);
    font-size: var(--xh-font-size-small-px);
    text-align: center;
    background-color: var(--xh-appbar-bg);
    border-bottom: var(--xh-border-solid);
  }

  &__list {
    overflow-y: auto !important;
    border: var(--xh-menu-border);

    &__item {
      margin: 0;
      padding: 0 var(--xh-pad-double-px) 0 var(--xh-pad-px);
      font-size: var(--xh-menu-item-font-size-px);
      color: var(--xh-menu-item-text-color);
      background-color: var(--xh-menu-bg) !important;
      box-shadow: none !important;

      &:not(:last-child) {
        border-bottom: var(--xh-menu-border);
      }

      &--pressed {
        background-color: var(--xh-menu-item-highlight-bg) !important;
      }

      & > div {
        padding: var(--xh-pad-half-px) 0;
        min-height: var(--xh-menu-item-height-px);
      }
    }
  }
}