@use "@sass-palette/hope-config";

:root {
  // external-link-icon
  --external-link-icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
  --external-link-c-icon: var(--vp-c-text-mute);
  --header-offset: var(--navbar-height);
}

#app {
  // navbar
  --navbar-c-bg: var(--vp-c-bg-elv-soft);

  // sidebar
  --sidebar-c-bg: var(--vp-c-bg-soft);
  --sidebar-space: var(--sidebar-width);

  // message
  --message-offset: var(--navbar-height);

  @media (max-width: hope-config.$pad) {
    --navbar-height: var(--navbar-mobile-height);
    --navbar-padding-y: var(--navbar-mobile-padding-y);
    --navbar-padding-x: var(--navbar-mobile-padding-x);
    --sidebar-width: var(--sidebar-mobile-width);
  }

  @media (min-width: hope-config.$pc) {
    --sidebar-space: clamp(
      var(--sidebar-width),
      calc(max(0px, calc((100vw - var(--content-width)) / 2 - 2rem))),
      100vw
    );
  }
}