:root {
  --fg: #000;
  --bg: #fff;
  --border-fg: rgb(218, 218, 218);
  --navbar-bg: #ffffff;
  --navbar-fg: inherit;
  --navlink-fg: inherit;
  --navlink-hover-fg: inherit;
  --navlink-hover-bg: #d8d8d8;

  --sidebar-bg: #ffffff;
  --sidebar-width: 300px;
  --sidebar-text-fg: #6b6867;

  --sidebar-menu-item-active-fg: #3e2723;

  --code-block-bg: #f8f8f8;
  --code-block-border-fg: rgb(201, 201, 201);
  --code-span-bg: #f8f3f0;
  --code-block-fg: rgb(94, 94, 94);
  --code-span-fg: inherit;
  --code-font: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

  --content-link-fg: rgb(20, 121, 20);
  --content-link-hover-decoration: underline;

  --table-border-fg: #e2e2e2;

  --loader-start-bg: #eeeeee;
  --loader-end-bg: #e4e2e1;
}

.dark {
  --bg: #121212;
  --fg: #eaeaea;
  --border-fg: rgb(68, 68, 68);
  --navbar-bg: var(--bg);
  --sidebar-bg: var(--bg);
  --sidebar-text-fg: var(--fg);
  --code-block-fg: rgb(182, 182, 182);
  --code-block-bg: rgb(30, 30, 30);
  --code-block-border-fg: rgb(42, 42, 42);
  --code-span-bg: #3b3b3b;
  --navlink-hover-bg: rgba(103, 103, 103, 0.29);
  --sidebar-menu-item-active-fg: #ffe77a;
  --content-link-fg: #ffe77a;
  --table-border-fg: rgb(59, 59, 59);

  --loader-start-bg: #2b2c2e;
  --loader-end-bg: #252525;
}

*,
*::before,
*::after {
  border-color: var(--border-fg);
}

body {
  font-family: Lato;
  background: var(--bg);
  color: var(--fg);
}

.navbar {
  background: var(--navbar-bg);
  color: var(--navbar-fg);
  z-index: 999;
}

.navlink {
  color: var(--navlink-fg);
  @apply flex;
  @apply items-center;
  @apply px-5;
  @apply h-8;
}

@screen md {
  .navlink {
    @apply p-2;
    @apply rounded;
    @apply h-8;
  }
}

.navlink:hover {
  color: var(--navlink-hover-fg);
  background: var(--navlink-hover-bg);
}

.sidebar {
  background: var(--sidebar-bg);
  z-index: 9999;
  width: 60%;
  min-width: 300px;
  color: var(--sidebar-text-fg);
  overflow: auto;
  transform: translateX(-100%);
  transition: transform ease-in-out 150ms;
}

.sidebar_overlay {
  z-index: 9990;
}

.sidebar_navbar {
  background: var(--navbar-bg);
  color: var(--navbar-fg);
}

@screen md {
  .sidebar {
    z-index: 990;
    width: var(--sidebar-width);
    transform: none;
  }
}

.sidebar.sidebar_show {
  display: block;
  transform: translateX(0);
}

.main {
  @apply px-5;
  @apply py-5;
}

@screen md {
  .main {
    @apply px-8;
    margin-left: var(--sidebar-width);
  }
}

.loader {
  animation: loader 3s infinite ease-in-out;
}

@keyframes loader {
  0% {
    background-color: var(--loader-start-bg);
  }
  50% {
    background-color: var(--loader-end-bg);
  }
  100% {
    background-color: var(--loader-start-bg);
  }
}

.menu_item__active {
  color: var(--sidebar-menu-item-active-fg);
  font-weight: bold;
}

.menu_item[data-depth='3'] {
  @apply pl-8;
}

.menu_item[data-depth='4'] {
  @apply pl-8;
}

.menu_item[data-depth='4']:before {
  content: '-';
  @apply opacity-25;
  @apply pr-2;
}
