/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Inter-roman.var.woff2") format("woff2");
  font-named-instance: "Regular";
}

@font-face {
  font-family: "Inter var";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Inter-italic.var.woff2") format("woff2");
  font-named-instance: "Italic";
}

:root {
  // Font features (https://rsms.me/inter/#features)
  // prettier-ignore
  font-feature-settings:
    "calt", // contextual alternatives
    "tnum", // fixed-with numbers
    "case", // alternatives near capital letters and numbers
    "cpsp", // capital spacing
    "ss01", // alternative digits
    "ss04", // disambiguation without slashed zero
    "ss03"; // alternative r for better readability

  --ada-lang-font-family: var(--ifm-font-family-base);
  --ifm-heading-font-family: var(--ada-lang-font-family);

  @supports (font-variation-settings: normal) {
    --ada-lang-font-family: "Inter var", var(--ifm-font-family-base);
  }

  font-family: var(--ada-lang-font-family);
  letter-spacing: -0.025em;
}

$ada-lang-primary-color: #228be6; // #2e8555;

// You can override the default Infima variables here
:root {
  --ifm-color-primary: #{$ada-lang-primary-color};

  --ifm-color-primary-dark: #{darken($ada-lang-primary-color, 8%)};
  --ifm-color-primary-darker: #{darken($ada-lang-primary-color, 18%)};
  --ifm-color-primary-darkest: #{darken($ada-lang-primary-color, 28%)};
  --ifm-color-primary-light: #{lighten($ada-lang-primary-color, 8%)};
  --ifm-color-primary-lighter: #{lighten($ada-lang-primary-color, 18%)};
  --ifm-color-primary-lightest: #{lighten($ada-lang-primary-color, 28%)};
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

// For readability concerns, you should choose a lighter palette in dark mode
[data-theme="dark"] {
  $ada-lang-primary-color-dark: lighten($ada-lang-primary-color, 14%);
  --ifm-color-primary: #{$ada-lang-primary-color-dark};

  --ifm-color-primary-dark: #{darken($ada-lang-primary-color-dark, 9%)};
  --ifm-color-primary-darker: #{darken($ada-lang-primary-color-dark, 14%)};
  --ifm-color-primary-darkest: #{darken($ada-lang-primary-color-dark, 28%)};
  --ifm-color-primary-light: #{lighten($ada-lang-primary-color-dark, 9%)};
  --ifm-color-primary-lighter: #{lighten($ada-lang-primary-color-dark, 14%)};
  --ifm-color-primary-lightest: #{lighten($ada-lang-primary-color-dark, 28%)};

  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/*****************************************************************************/

:root {
  // Compute main content + right sidebar, and clamped to max container width
  --ada-lang-main-and-right-sidebar: calc(100% - var(--doc-sidebar-width));
  --ada-lang-main-and-right-sidebar-clamped: min(
    var(--ifm-container-width-xl),
    var(--ada-lang-main-and-right-sidebar)
  );

  // Let clamped main content + sidebar be in the center, then compute width of margin
  --ada-lang-content-margin: calc(
    (var(--ada-lang-main-and-right-sidebar) - var(--ada-lang-main-and-right-sidebar-clamped)) / 2
  );

  // Main content is 75%, right sidebar is 25%
  --ada-lang-content-width: calc(0.75 * var(--ada-lang-main-and-right-sidebar-clamped));

  --ada-lang-right-margin: calc(
    var(--doc-sidebar-width) + var(--ada-lang-content-margin) + var(--ada-lang-content-width)
  );
}

/*****************************************************************************/

.DocSearch-Button {
  height: 32px !important;
  --docsearch-text-color: var(--ifm-navbar-link-color);
}

@media (max-width: 996px) {
  // TODO This is a bit error-prone and it would be better to have something like :has()
  // (currently requires layout.css.has-selector.enabled to be set to true in Firefox)
  // div:has(.DocSearch-Button) {
  div[class*="searchBox"] {
    position: inherit !important;
  }
}

[data-theme="light"] .DocSearch-Button {
  --docsearch-searchbox-background: var(--ifm-color-emphasis-700);
  --docsearch-searchbox-focus-background: var(--ifm-color-emphasis-600);
}

[data-theme="dark"] .DocSearch-Button {
  --docsearch-searchbox-background: var(--ifm-color-emphasis-300);
  --docsearch-searchbox-focus-background: var(--ifm-color-emphasis-400);
}

.footer--dark {
  --ifm-footer-background-color: #4a4639;
}

// Display logos when JavaScript is disabled
:not([data-theme="light"])[class*="themedImage--dark"] {
  display: inline !important;
}

// Prevent layout shift of items to the right of the logo when toggling theme
.navbar__logo {
  width: 32px;
  height: 32px;
}

// Vertically center items in the navbar for small viewports
.navbar__items {
  height: 100%;
}

// Fixed nav bar on non-small windows on desktop
@media screen and (min-width: 996px) and (any-hover: hover) {
  nav.navbar {
    transform: revert;
  }
}

// Icons in header

.fa-icon::before {
  content: "";
  display: flex;
  mask-repeat: round;
  background-repeat: no-repeat;
  transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}

.header__image {
  &::before {
    background-color: var(--ifm-color-white);
    width: 24px;
    height: 24px;
  }

  &:hover::before {
    opacity: 0.5;
    background-color: var(--ifm-footer-link-hover-color);
  }
}

.header-github-link::before {
  mask-image: url("/static/img/fontawesome/brands/github.svg");
}

// Icons in footer
.footer__image {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--ifm-footer-color);
  height: 2em; // This is a hack to reset height to what icon-less footer images have

  &::before {
    background-color: var(--ifm-footer-color);
    width: 16px;
    height: 16px;
  }

  &:hover {
    color: var(--ifm-footer-link-hover-color);

    &::before {
      background-color: var(--ifm-footer-link-hover-color);
    }
  }
}

.footer__title {
  font-family: var(--ada-lang-font-family);
}

// Brand icons in Community and More columns in footer

.footer-github-link::before {
  mask-image: url("/static/img/fontawesome/brands/github.svg");
}

.footer-gitter-link::before {
  mask-image: url("/static/img/fontawesome/brands/gitter.svg");
}

.footer-reddit-link::before {
  mask-image: url("/static/img/fontawesome/brands/reddit-alien.svg");
}

.footer-telegram-link::before {
  mask-image: url("/static/img/fontawesome/brands/telegram.svg");
}

.footer-discord-link::before {
  mask-image: url("/static/img/fontawesome/brands/discord.svg");
}

.footer-stackoverflow-link::before {
  mask-image: url("/static/img/fontawesome/brands/stack-overflow.svg");
}

.footer-discourse-link::before {
  mask-image: url("/static/img/fontawesome/brands/discourse.svg");
}

.Indented2 {
  margin-left: 2em;
}

.Indented4 {
  margin-left: 4em;
}

.Indented6 {
  margin-left: 6em;
}

.Indented8 {
  margin-left: 8em;
}
