@layer l-base, l-nextra;

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

/* #region hamburger mobile menu */

.light .nextra-mobile-nav {
  @apply !bg-white;

  /* We recompute colors so they're up to date even if the --nextra-primary-hue was overwritten on the body. */
  --x-color-primary-700: hsl(
    var(--nextra-primary-hue) var(--nextra-primary-saturation)
      calc(var(--nextra-primary-lightness) - 6%)
  );
  --x-color-primary-800: hsl(
    var(--nextra-primary-hue) var(--nextra-primary-saturation)
      calc(var(--nextra-primary-lightness) - 13%)
  );
}

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

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

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

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

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

.light .nextra-mobile-nav 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);
  }

  & mark {
    background-color: oklch(0.611752 0.07807 214.47 / 0.8);
  }
}

/* #endregion search results */

@layer 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 */
.x\:subpixel-antialiased {
  -webkit-font-smoothing: unset;
  -moz-osx-font-smoothing: unset;
}

/* fix for nextra navbar for HiveNavigation */
:root {
  --nextra-navbar-height: 82px;
}
@media (min-width: 768px) {
  .nextra-search {
    @apply ml-3 basis-64;
    input,
    kbd {
      @apply text-green-700 dark:text-neutral-300;
    }
    input {
      @apply h-12 w-full rounded-lg border border-green-200 bg-white pl-4 pr-8;
      @apply ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))];
      @apply ring-offset-[rgb(var(--nextra-bg))] dark:border-neutral-800 dark:bg-inherit;
    }
    kbd {
      @apply absolute right-4 top-1/2 my-0 -translate-y-1/2 border-none bg-green-200 dark:bg-neutral-700;
    }
  }
}
@media (max-width: 767px) {
  :root {
    --nextra-navbar-height: 64px;
  }
}