flotilla/src/lib/components/space-menu.css

@layer components {
  .space-menu__scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .secondary-nav--mobile-space {
      @apply mt-sai bg-backdrop mb-0 w-full max-w-full grow border-0;

      /* Reserve room for the fixed mobile primary nav (h-14) plus the bottom
         safe-area inset, otherwise the connection status row at the bottom of
         the menu is hidden behind the nav footer on devices with an inset. */
      padding-bottom: calc(var(--saib) + 4rem);

      .tip[data-tip]::before {
        display: none !important;
      }

      .secondary-nav__nav-item {
        @apply rounded-2xl font-medium;

        &:hover {
          @apply bg-surface-less text-content;
          transform: none;
          box-shadow: none;
        }

        &:active {
          transform: none;
          box-shadow: none;
        }
      }

      .secondary-nav__nav-item--active {
        @apply text-content;
        background-color: color-mix(in srgb, var(--primary) 14%, var(--surface));
        box-shadow: none;

        &:hover {
          @apply text-content;
          background-color: color-mix(in srgb, var(--primary) 18%, var(--surface));
        }
      }
    }

    .space-menu {
      @apply gap-3 p-3 pt-2;
    }

    .space-menu__card {
      @apply p-2;
    }

    .space-menu__card .secondary-nav__header {
      @apply text-content-muted px-2 py-1 text-xs font-semibold tracking-wider uppercase;
    }

    .space-menu__card .secondary-nav__header:first-child {
      @apply text-content pb-0.5 font-bold;
    }

    .space-menu__card .secondary-nav__header:not(:first-child) {
      @apply mt-2 pt-3;
    }

    .space-menu__header {
      @apply p-3;
    }

    .space-menu__header-button {
      @apply rounded-2xl p-0;

      &:hover {
        @apply bg-transparent;
      }
    }

    .space-menu__scroll {
      @apply min-h-0 flex-1 gap-3 overflow-x-hidden overflow-y-auto;
    }

    .space-menu__status {
      @apply flex w-full flex-col gap-2;
    }

    .space-menu__status > .card {
      @apply w-full gap-1 border-0 bg-transparent p-0 shadow-none;
    }

    .space-menu__status-link {
      @apply h-auto w-full border-0 bg-transparent p-0 shadow-none;

      &:hover {
        @apply text-content border-0 bg-transparent;
      }
    }

    .space-menu__status-link .flex {
      @apply justify-start px-1;
    }
  }
}

@media (max-width: 768px) {
  [data-theme="dark"] .secondary-nav--mobile-space {
    @apply bg-surface-less;
  }

  [data-fl-theme="clay"] .secondary-nav--mobile-space {
    .secondary-nav__nav-item:hover,
    .secondary-nav__nav-item:active {
      background-color: var(--surface-less);
      transform: none;
      box-shadow: none;
    }

    .secondary-nav__nav-item--active,
    .secondary-nav__nav-item--active:hover {
      background-color: color-mix(in srgb, var(--primary) 14%, var(--surface));
      color: var(--content);
      box-shadow: none;
    }
  }

  [data-fl-theme="clay"] .space-menu__status-link:hover,
  [data-fl-theme="clay"] .space-menu__status-link:active {
    transform: none;
    box-shadow: none;
  }

  .space-menu__status .text-sm {
    @apply font-medium;
  }
}