body:not(.is-mobile) .menu,
body:not(.is-mobile) .suggestion-container {
  backdrop-filter: var(--blur-s);
  border-radius: var(--radius-m);
  padding: 0;
  border: none;

  &:not(:hover) {
    backdrop-filter: var(--blur-l);

    .menu-item.selected:not(.is-label):not(.is-disabled),
    .suggestion-item.is-selected:not(.mod-group) {
      background-color: var(--background-modifier-border-hover);
      color: var(--text-normal);

      .menu-item-icon,
      .suggestion-flair {
        color: var(--text-normal);
      }
    }
  }

  > div {
    padding: 4px;
  }

  .menu-separator {
    margin: 6px 8px;
  }

  .menu-item,
  .suggestion-item {
    border-radius: calc(var(--radius-m) - 4px);
    padding: 4px 12px;
    font-size: var(--font-ui-small);

    .svg-icon {
      --icon-size: var(--icon-xs);
    }
  }
  .menu-item.selected:not(.is-label):not(.is-disabled),
  .suggestion-item.is-selected:not(.mod-group) {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);

    .menu-item-icon,
    .suggestion-flair {
      color: var(--text-on-accent);
    }
  }

  .search-suggest-item.mod-group {
    margin: 0;
    padding: 4px 8px;
  }
  .search-suggest-item.mod-group:not(:first-child) {
    margin-top: 8px;
  }
  .search-suggest-item:not(.mod-group).is-selected {
    --text-muted: var(--text-on-accent);
  }

  .bases-query-container input {
    border: none;
  }
  .bases-toolbar-menu-container .search-input-container {
    margin: 0;
  }
  .bases-toolbar-menu-item-icon,
  .filter-row-actions > button {
    min-height: unset;
  }
  .bases-toolbar-menu-item {
    border-radius: calc(var(--radius-m) - 4px) !important;
  }
  .bases-toolbar-menu-form {
    padding: 0;
  }
}

body.is-mobile {
  .menu {
    backdrop-filter: var(--blur-m);
    background-color: var(--modal-background);
    padding: 0;
    overflow: hidden;
    white-space: normal;
    border-radius: var(--modal-radius);
  }

  .menu-scroll {
    background-color: transparent;
    max-height: 80vh;
  }
  .menu-group .menu-item {
    gap: 16px;
  }
  .menu-group .menu-item:first-child {
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
  }
  .menu-group .menu-item:last-child {
    border-bottom-left-radius: var(--radius-m);
    border-bottom-right-radius: var(--radius-m);
  }
  .menu-group .menu-item:not(:last-child) {
    border-bottom-color: transparent;
  }
  .menu-item-icon {
    color: var(--text-normal);
    justify-content: center;
    order: 0 !important;

    > svg.svg-icon {
      --icon-size: var(--icon-m);
    }
  }
  .menu-item-title {
    white-space: normal;
    position: relative;
  }
  .menu-item.is-label {
    border: none !important;
  }

  .menu-separator {
    margin: 8px var(--side-padding);
  }

  .suggestion-container {
    backdrop-filter: var(--blur-l);
    border: none;
    background-color: rgb(from var(--background-secondary-alt) r g b / 75%) !important;

    .suggestion {
      padding: 0;
    }
    .suggestion-item {
      display: flex;
      align-items: center;
      margin: 0;
      border-bottom: var(--border-width) solid var(--background-modifier-border-hover);
      border-radius: 0;
      padding: 8px var(--side-padding);
      min-height: var(--input-height);
    }
    .suggestion-item:last-child {
      border: none;
    }
  }
}

body.is-phone {
  .menu-grabber {
    position: absolute;
    align-self: center;
    width: 36px;
    height: 5px;
    z-index: 1;
  }
  .menu-scroll {
    padding: 40px var(--side-padding) max(var(--safe-area-inset-bottom), 16px);
  }
  .menu-item {
    font-size: var(--font-ui-medium);
    padding: var(--nav-item-padding);
  }
  .menu-item:not(:last-child) .menu-item-title::after {
    content: "";
    position: absolute;
    height: var(--border-width);
    background: var(--background-modifier-border);
    inset: auto 0 -16px;
  }

  .mod-views .suggestion-group,
  .mod-properties .suggestion-group,
  .mod-views .bases-toolbar-menu-container-header,
  .mod-properties .bases-toolbar-menu-container-header,
  .mod-views .bases-toolbar-menu-form,
  .mod-properties .bases-toolbar-menu-form {
    padding-left: 0;
    padding-right: 0;
  }
  .bases-toolbar-menu-container .search-input-container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .bases-toolbar-menu-item-icon {
    padding: revert-layer;
  }
  .menu .suggestion-group .suggestion-item {
    padding: 16px;
  }
  .menu .suggestion-group .suggestion-item:first-child {
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
  }
  .menu .suggestion-group .suggestion-item:last-child {
    border-bottom-left-radius: var(--radius-m);
    border-bottom-right-radius: var(--radius-m);
  }
}

body.is-tablet {
  .menu {
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
  }
  .menu-scroll {
    padding: 12px 8px;
  }
  .menu-item {
    padding: 12px var(--side-padding);
  }
}
