:root {
  --scalar-border-width: 1px;

  --scalar-radius: 0px;
  --scalar-radius-lg: 0px;
  --scalar-radius-xl: 0px;

  --scalar-text-decoration: none;
  --scalar-text-decoration-hover: none;

  --scalar-font:
    'Lato', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --scalar-font-code:
    'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.scalar-app:not(#headlessui-portal-root) {
  margin: calc(3.5rem + 1px) 0 0 0;
  height: calc(100vh - 6.5rem - 2px);
  min-height: calc(100vh - 6.5rem - 2px);
  max-height: calc(100vh - 6.5rem - 2px);
  overflow: auto;
}

:where(.t-doc__sidebar, .references-navigation-list) {
  height: calc(100vh - 6.5rem - 2px) !important;
  width: 18rem;
  min-height: calc(100vh - 6.5rem - 2px);
  max-height: calc(100vh - 6.5rem - 2px);
  overflow: auto !important;
  position: fixed !important;
  left: 0 !important;
  top: calc(3.5rem + 1px) !important;
  z-index: 10;
}

.dark-mode {
  color-scheme: dark;
}

.light-mode {
  color-scheme: light;
}

.light-mode,
.dark-mode {
  --scalar-scrollbar-color: #808290;
  --scalar-scrollbar-color-active: #808290;

  --scalar-shadow-1: 0 1px 3px 0 #aaabb6;
  --scalar-shadow-2: #aaabb6 0px 13px 20px 0px, #aaabb6 0px 3px 8px 0px, #aaabb6 0px 0 0 0.5px;

  /* Basic theme */
  --scalar-background-1: #e5e6e8;
  --scalar-background-2: #f5f5f6;
  --scalar-background-3: #cdced4;
  --scalar-background-accent: #f0ac81;

  --scalar-color-1: #575863;
  --scalar-color-2: #656775;
  --scalar-color-3: #4a4a54;

  --scalar-color-accent: #e25822;
  --scalar-border-color: #aaabb6;

  /* Advanced theme */
  --scalar-color-green: #00976e;
  --scalar-color-red: #9e744f;
  --scalar-color-yellow: #f0ac81;
  --scalar-color-blue: #00bbd5;
  --scalar-color-orange: #e25822;
  --scalar-color-purple: #008080;

  --scalar-button-1: var(--scalar-background-2);
  --scalar-button-1-hover: var(--scalar-background-accent);
  --scalar-button-1-color: var(--scalar-color-1);

  /* Document Sidebar */
  .t-doc__sidebar {
    --scalar-sidebar-background-1: var(--scalar-background-1);
    --scalar-sidebar-color-1: var(--scalar-color-1);
    --scalar-sidebar-color-2: var(--scalar-color-3);
    --scalar-sidebar-border-color: var(--scalar-border-color);

    --scalar-sidebar-item-hover-background: var(--scalar-background-accent);
    --scalar-sidebar-item-hover-color: var(--scalar-color-3);

    --scalar-sidebar-item-active-background: var(--scalar-background-3);
    --scalar-sidebar-color-active: var(--scalar-color-3);

    --scalar-sidebar-indent-border: var(--scalar-sidebar-border-color);
    --scalar-sidebar-indent-border-hover: var(--scalar-color-accent);
    --scalar-sidebar-indent-border-active: var(--scalar-color-3);

    --scalar-sidebar-search-background: var(--scalar-background-2);
    --scalar-sidebar-search-color: var(--scalar-color-2);
    --scalar-sidebar-search-border-color: var(--scalar-border-color);
  }
}

*::selection {
  background-color: color-mix(in srgb, var(--scalar-color-accent), transparent 75%);
}

* {
  border-radius: 0 !important;
}
