<script lang="ts">
  import { config } from "./api";

  const rgb = ([r, g, b]: [number, number, number]) => `rgb(${r}, ${g}, ${b})`;

  const custom = {
    "--theme-background": rgb(config.theme.background),
    "--theme-background-main": rgb(config.theme.background_main),
    "--theme-background-server": rgb(config.theme.background_server),
    "--theme-background-button": rgb(config.theme.background_button),
    "--theme-text": rgb(config.theme.text),
    "--theme-text-secondary": rgb(config.theme.text_secondary),
    "--theme-accent-success": rgb(config.theme.accent_success),
    "--theme-accent-fail": rgb(config.theme.accent_fail),
    "--theme-link": rgb(config.theme.link),
    "--theme-link-visited": rgb(config.theme.link_visited),
    "--theme-highlight": rgb(config.theme.highlight),
    "--theme-highlight-opacity": `${config.theme.highlight_opacity / 100}`,
    "--theme-fonts": `${config.theme.fonts.map((x) => `'${x}'`).join(", ")}`,
  };

  for (const [k, v] of Object.entries(custom))
    document.body.style.setProperty(k, v);
</script>

<style>
  :global {
    @layer reset {
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: inherit;
      }
    }

    body {
      background-color: var(--theme-background);
      font-family: var(--theme-fonts);
    }

    a {
      color: var(--theme-link);

      &:visited {
        color: var(--theme-link-visited);
      }

      &:hover {
        text-decoration-style: dotted;
      }

      &:active {
        text-decoration: none;
      }
    }

    ::selection {
      background-color: rgb(
        from var(--theme-highlight) r g b / var(--theme-highlight-opacity)
      );
    }
  }
</style>
