@layer l-base, l-nextra, l-components;

@import 'tailwindcss/base' layer(l-base);
@import 'nextra-theme-docs/dist/style.css' layer(l-nextra);
@import 'tailwindcss/components' layer(l-components);
@import 'tailwindcss/utilities';

.nextra-banner-container._bg-neutral-900._flex {
  @apply bg-[#48224e] bg-none;
}
:root {
  --nextra-navbar-height: 72px;
}

html {
  /* font from tailwindcss/base is overwritten by Nextra styles */
  font-family: var(--font-sans, ui-sans-serif), system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.nextra-nav-container [role='menu']:has(a[href='https://the-guild.dev/graphql/hive'])
{
  @apply grid max-h-[unset] w-[470px] grid-cols-3 gap-y-2 p-2;

  a:nth-child(-n + 3) {
    @apply rounded-b-none border-b border-black/20 pb-3 dark:border-white/20;
  }
}

/* #region hamburger mobile menu */

.light .nextra-sidebar-container input {
  color: rgb(0, 52, 44);
  background-color: rgb(248, 247, 246) !important;
  border: 1px solid rgb(241, 238, 228);
}

.light .nextra-sidebar-container input::placeholder {
  color: rgba(36, 88, 80, 0.9) !important;
}

.light .nextra-sidebar-container .nextra-sidebar-footer:is(html[class] *) {
  border-color: #e5e7eb;
}

.light .nextra-sidebar-container kbd {
  @apply !border-gray-200 !bg-white;
}

.light .nextra-sidebar-container li > :is(a, button) {
  @apply text-gray-500 hover:bg-gray-100 hover:text-gray-900;
}

.light .nextra-sidebar-container ul::before {
  @apply !bg-gray-200;
}

/* #endregion hamburger mobile menu */

/* #region search results */

.light .nextra-search-results {
  @apply !border-green-200;
  background-color: white;
  padding: 1rem 0;

  & > div {
    @apply border-beige-400 text-green-1000;
  }

  & > a > div {
    @apply text-green-800;
  }

  &::before {
    background-color: rgb(229, 231, 235);
  }
}

/* #endregion search results */

@layer l-components {
  .hive-focus {
    &:focus {
      outline: none;
    }
    &:focus-visible {
      @apply ring ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_86%)] ring-offset-1 ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_77%)] dark:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%)] dark:ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_39%)];
    }
  }

  .hive-focus-within {
    &:focus {
      outline: none;
    }

    &:focus-within {
      @apply ring ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_86%)] ring-offset-1 ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_77%)] dark:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%)] dark:ring-offset-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_39%)];
    }
  }

  .MarketplaceSearch {
    --fg: theme(colors.white);
    --fg-80: rgb(from var(--fg) r g b / 0.8);
    --fg-70: rgb(from var(--fg) r g b / 0.7);
    --fg-60: rgb(from var(--fg) r g b / 0.6);

    &.green {
      --bg: theme(colors.green.1000);
    }

    &.neutral {
      --bg: theme(colors.neutral.900);

      .light & {
        --bg: theme(colors.white);
        --fg: theme(colors.neutral.900);
      }
    }
  }
}

/* wrong with neue montreal */
._subpixel-antialiased {
  -webkit-font-smoothing: unset;
  -moz-osx-font-smoothing: unset;
}

/* fix for nextra navbar for HiveNavigation */
:root {
  --nextra-navbar-height: 90px;
}

@media (min-width: 768px) {
  .nextra-sidebar-container,
  .nextra-toc > .nextra-scrollbar {
    top: var(--nextra-navbar-height);
  }
}

@media (max-width: 767px) {
  :root {
    --nextra-navbar-height: 64px;
  }
}