@use 'sass:math';
@use 'helpers/functions' as *;
@import 'fonts/mona-sans-font';
@import 'fonts/geist-mono-font';
@import 'fonts/overpass-mono';
@import 'bootstrap-custom';

html {
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background: $neutral-50;
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track {
    background: $neutral-20;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: $neutral-60;
  }
  scrollbar-width: thin;
  scrollbar-color: $neutral-50 $neutral-20;

  &[data-theme='light'] {
    &::-webkit-scrollbar-thumb {
      background: $neutral-80;
    }
    &::-webkit-scrollbar-track {
      background: $neutral-94;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: $neutral-90;
    }
    scrollbar-color: $neutral-80 $neutral-94;
  }
}

.scrolled {
  .site-header {
    z-index: 3;
  }
  .main-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: $neutral-10;
    padding-bottom: $spacer * 0.5;
    @include media-breakpoint-up(xl) {
      top: -24px;
    }
  }

  .top-banner {
    display: none;
  }
}

body {
  &.no-scroll {
    overflow: hidden;
  }

  // Apply Mona Sans width variation setting globally
  // This ensures all text using Mona Sans (via font-family-base) uses width axis at 100
  font-variation-settings: 'wdth' 100;
  font-feature-settings: 'ss05' on;
  font-weight: 350;
}

/* Fix thick underlines in Mona Sans font */
* {
  text-decoration-thickness: 1px !important;
}

.weh {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: -1;
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: 0;
}

.divider {
  border-top: 1px solid $neutral-40;
  width: 100%;
}

@import 'components';
@import 'syntax-highlight';
@import 'mathjax';
@import 'partials/logo';
@import 'partials/top-banner';
@import 'partials/menu-mobile';
@import 'partials/menu';
@import 'partials/site-header';
@import 'partials/link';
@import 'partials/hubspot-form';
@import 'partials/breadcrumbs';
@import 'partials/footer';
@import 'partials/not-found';
@import 'partials/go-to-top-button';