@layer missing, base, custom, theme;
/* TODO: eventually we will serve this ourself, but for now we'll use a public CDN */
@import url("https://unpkg.com/missing.css@1.1.2") layer(missing);

@layer theme {
  :root {
    &.purps {
      --fg: #F0F3FF; /* Off white */
      --bg: #211951; /* Navy */
      --box-bg: #836FFF; /* Violet */
      --accent: #15F5BA; /* Green */
      --graphical-fg: var(--accent);
      --interactive-bg: var(--gray-7);
    }

    &.metal {
      --fg: #0A0A0A; /* Black-ish */
      --bg: #8697C4; /* Light blue */
      --box-bg: #ADBBDA; /* Lighter blue */
      --accent: #3D52A0; /* Dark-ish blue */
      --graphical-bg: var(--box-bg);
      --interactive-bg: var(--gray-5);
    }

    &.eye-pain {
      --fg: #050315; /* Black-ish */
      --bg: #FBFBFE; /* White-ish */
      --box-bg: #DEDCFF; /* Light purple */
      --accent: #433bff; /* purple blue-ish */
      --graphical-bg: var(--box-bg);
      --interactive-bg: var(--gray-5);
    }

    &.actually-green {
      --fg: #0C0F0E; /* Black-ish */
      --bg: #F4F9F7; /* Green but almost white */
      --box-bg: #83E8B8; /* Greenish */
      --accent: var(--fg); /* Black-ish again */
      --graphical-bg: var(--box-bg);
      --interactive-bg: var(--gray-5);
    }
  }
}

@layer custom {
  :root {
    scroll-behavior: smooth;
  }

  /* I don't like the outline, but if it's useful it can be added back */
  :target {
    outline: none;
  }

  /* Stops header and other elements from shrinking */
  body > * {
    flex-shrink: 0;
  }

  header {
    border-block-end-color: var(--graphical-fg);
  }

  footer {
    border-block-start-color: var(--accent);
  }
}

@layer base {
  @scope (.tree) {
    :scope {
      --radius: 10px;
      list-style: none;
      padding-left: 0;
    }

    ul {
      margin-top: 0;
      margin-left: calc(var(--radius) - var(--rhythm));
      padding-left: 0;
    }

    li {
      display: block;
      position: relative;
      padding-left: calc(2 * var(--rhythm) - var(--radius) - 2px);
    }

    ul li {
      border-left: 2px solid var(--accent);

      &:last-child {
        border-color: transparent;
      }
    }
    
    ul li::before {
      content: '';
      display: block;
      position: absolute;
      top: calc(var(--rhythm) / -2 - 2px);
      left: -2px;
      width: calc(var(--rhythm) + 2px);
      height: calc(var(--rhythm) + 3px);
      border: solid var(--accent);
      border-width: 0 0 2px 2px;
    }

    details {
      overflow: visible;
      border: none;
      padding: 0;
      margin: 0;
    }

    summary {
      display: block;
    }

    summary::marker {
      display: none;
    }

    li::after {
      content: '';
      display: block;
      position: absolute;
      top: calc(var(--rhythm) / 2 - var(--radius));
      left: calc(var(--gap) - var(--radius) - 1px);
      width: calc(2 * var(--radius));
      height: calc(2 * var(--radius));
      border-radius: 50%;
      background-color: var(--accent);
    }
  }

  .margin-top\:auto {
    margin-top: auto;
  }

  .margin-top\:0 {
    margin-top: 0;
  }

  .padding-top\:0 {
    padding-top: 0;
  }
}