@import "./variables.css";

:root {
  --border-radius: 10px;
}

/*
  NOTE: As Starlight overrides theme values by a [data-theme] selector that is
  either "light" or "dark", we use a general selector so we can override with
  semantic values.
*/
:root[data-theme] {
  --sl-color-gray-1: var(--fg-muted);
  --sl-color-gray-2: var(--fg-default);
  --sl-color-gray-3: var(--fg-muted);
  --sl-color-gray-4: limegreen; /* DEV HIGHLIGHT, haven't seen it yet */
  --sl-color-gray-5: var(--bg-emphasis);
  --sl-color-gray-6: var(--bg-emphasis);
  --sl-color-gray-7: var(--bg-emphasis);

  --sl-color-accent: var(--fg-brand);
  --sl-color-accent-high: var(--fg-brand-hover);
  --sl-color-white: var(--fg-default);
  --sl-color-black: var(--bg-background);
  --sl-color-hairline-shade: var(--border-default);

  --sl-color-bg-nav: var(--sl-color-black);
  --sl-color-bg: var(--bg-background);

  --sl-color-text-accent: var(--fg-brand);

  /* Fix for misaligned elements in nav/header */
  --sl-nav-pad-y: 0.55rem;

  /*
    Overrides for only the note badge on the Changelog page, add more if
    necessary
  */
  --sl-badge-note-bg: var(--bg-info);
  --sl-badge-note-border: var(--fg-info);
  --sl-badge-note-text: var(--fg-info);

  a.site-title {
    color: var(--sl-color-text);
  }

  /* Example code block highlighting */
  .expressive-code .frame {
    --ec-frm-trmTtbBg: var(--bg-emphasis);
    --ec-brdCol: var(--border-default);

    figcaption {
      --ec-frm-trmTtbBrdBtmCol: var(--border-default);
      --ec-frm-edTabBarBrdCol: var(--border-default);
      --ec-frm-edTabBarBg: var(--bg-emphasis);
      --ec-frm-edTabBarBrdBtmCol: var(--border-default);

      span {
        --ec-frm-edActTabIndTopCol: var(--fg-brand);
        --ec-frm-edActTabBg: var(--bg-background);
        --ec-frm-edActTabIndBtmCol: var(--border-default);
      }
    }

    pre {
      --ec-brdCol: var(--border-default);

      background-color: var(--bg-input);

      .ec-line.highlight {
        --tmLineBgCol: var(--bg-success);
        --ec-tm-insBrdCol: var(--fg-success);
      }
    }
  }

  .starlight-aside.starlight-aside--note {
    --sl-color-asides-text-accent: var(--fg-info);
    --sl-color-asides-border: var(--fg-info);
    background-color: var(--bg-info);
  }

  .starlight-aside.starlight-aside--caution {
    --sl-color-asides-text-accent: var(--fg-warning);
    --sl-color-asides-border: var(--fg-warning);
    background-color: var(--bg-warning);
  }

  .starlight-aside.starlight-aside--danger {
    --sl-color-asides-text-accent: var(--fg-danger);
    --sl-color-asides-border: var(--fg-danger);
    background-color: var(--bg-danger);
  }

  .starlight-aside.starlight-aside--tip {
    --sl-color-asides-text-accent: var(--fg-tip);
    --sl-color-asides-border: var(--fg-tip);
    background-color: var(--bg-tip);
  }
}

/*
  Hack to hide the sidebar, but show it only in mobile menus. Used in Starlight
  pages that don't come with a sidebar, but where the `hasSideBar` prop is set
  to true (e.g. the home & Changelog page).
*/
body:has(.hide-sidebar) {
  @media (width > 50rem) {
    #starlight__sidebar {
      display: none;
    }
  }

  .main-frame {
    --sl-content-inline-start: 0;
  }
}

.sl-markdown-content h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800 !important;
}

/* Navbar */

.social-icons a {
  color: var(--sl-color-white);
}

/*
  Sidebar

  HACK: this entire section is a hacky patch for the existing sidebar component.
  A more proper way would be to customize the component per:
  https://starlight.astro.build/guides/overriding-components/
  , but we gotta shippp
*/

nav.sidebar a {
  font-size: var(--sl-text-base);
}

nav.sidebar a:hover {
  color: var(--sl-color-accent);
}

nav.sidebar details > ul > li {
  margin-inline-start: 1rem;
}

/* nav.sidebar .top-level li {
  padding-inline-start: 0;
  margin-inline-start: 0;
  border-inline-start: none;
}

nav.sidebar details > ul details > ul {
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid var(--sl-color-gray-5);
}

nav.sidebar .group-label span.large {
  font-size: var(--sl-text-sm);
  text-transform: uppercase;
}

nav.sidebar ul ul .group-label span.large {
  color: var(--sl-color-white);
  text-transform: none;
  font-size: var(--sl-text-base);
  font-weight: normal;
} */

nav.sidebar a[aria-current="page"],
nav.sidebar a[aria-current="page"]:hover,
nav.sidebar a[aria-current="page"]:focus {
  font-weight: 600;
  background-color: transparent;
  color: var(--sl-color-accent);
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
}

.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {
  color: var(--sl-color-white);
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

/* Styling buttons */

kbd:not(site-search kbd) {
  background-color: var(--sl-color-gray-6);
  border-radius: 0.25rem;
  border: 1px solid var(--sl-color-gray-5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  display: inline;
  font-family: sans-serif;
  font-size: 0.6875rem;
  font-weight: bold;
  padding: 0.1rem 0.4rem;
  margin: 0 0.25rem;
  cursor: default;
  line-height: 1;
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}

a,
a:active,
a:visited {
  color: var(--sl-color-accent);
}

a:hover {
  color: var(--sl-color-accent-high);
}
