@value large-tablet-breakpoint-query from '~diem-docusaurus-components/src/variables.module.css';
@value large-tablet-breakpoint-max-query from '~diem-docusaurus-components/src/variables.module.css';
@value large-desktop-breakpoint-query from '~diem-docusaurus-components/src/variables.module.css';

.root {
  font-size: 14px;
  position: fixed;
  width: 100%;
  z-index: 10;
}

.desktop {
  display: none;
}

.logo,
.logo svg {
  height: 19.5px;
}

.logo path {
  fill: var(--accent-highlight);
}

.logo {
  padding-right: 18px;
}

html[data-theme='dark'] {
  --nav-menu-icon-fill: white;
  --nav-page-indicator-primary: white;
  --nav-page-indicator-secondary: var(--gray-1);
  --nav-primary-text-color: white;
  --nav-secondary-background: #2A3045;
  --nav-secondary-text-color: var(--gray-1);
}

html {
  --nav-menu-icon-fill: rgb(53, 64, 82);
  --nav-secondary-background: #F9F8F8;
  --nav-secondary-text-color: black;
  --nav-black: #414f64;
  --nav-page-indicator-primary: #354052;
  --nav-page-indicator-secondary: #5F7186;
  --nav-primary-text-color: #42318c;
  --primary-nav-height: 60px;
  --subnav-height: 60px;
  --nav-right-padding: 20px;
  --nav-left-padding: 20px;
  --total-nav-height: calc( var(--primary-nav-height) + var(--subnav-height) );
}

@media large-tablet-breakpoint-query {
  html {
    --primary-nav-height: 80px;
  };

  .logo {
    padding-right: 0;
  }

  .mobile {
    display: none;
  }
}
