---

---

<div>
    <slot/>
</div>

<style is:global lang="stylus">

/* utils */
white(a)
  rgba(255, 255, 255, a)

black(a)
  rgba(0, 0, 0, a)

isOklch(c)
  return substr(c, 0, 5) == 'oklch'

oklch_fallback(c)
  str = '' + c    // convert color value to string
  if isOklch(str)
    return convert(oklchToHex(str))
  return c

color_set(colors)
  @supports (color: oklch(0 0 0))
    :root
      for key, value in colors
        {key}: value[0]
    :root.dark
      for key, value in colors
        if length(value) > 1
          {key}: value[1]
  /* provide fallback color for oklch */
  @supports not (color: oklch(0 0 0))
    :root
      for key, value in colors
        {key}: oklch_fallback(value[0])
    :root.dark
      for key, value in colors
        if length(value) > 1
          {key}: oklch_fallback(value[1])

rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60), oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240), oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330), oklch(0.80 0.10 360))
rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))

:root
  --radius-large 16px

  --banner-height-home 60vh
  --banner-height 40vh

color_set({
  --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
  --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
  --card-bg: white oklch(0.23 0.015 var(--hue))

  --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))

  --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue))
  --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue)) oklch(0.38 0.04 var(--hue))
  --btn-regular-bg-active: oklch(0.85 0.08 var(--hue)) oklch(0.43 0.045 var(--hue))

  --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.2 0.02 var(--hue))
  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.17 0.017 var(--hue))

  --btn-card-bg-hover: oklch(0.96 0.015 var(--hue)) oklch(0.3 0.03 var(--hue))
  --btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue))

  --enter-btn-bg: var(--btn-regular-bg)
  --enter-btn-bg-hover: var(--btn-regular-bg-hover)
  --enter-btn-bg-active: var(--btn-regular-bg-active)

  --deep-text: oklch(0.25 0.02 var(--hue))

  --line-divider: black(0.08) white(0.08)

  --line-color: black(0.1) white(0.1)
  --meta-divider: black(0.2) white(0.2)

  --inline-code-bg: var(--btn-regular-bg)
  --inline-code-color: var(--btn-content)
  --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
  --codeblock-selection: oklch(0.40 0.08 var(--hue))
  --codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))

  --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
  --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))

  --color-selection-bar: rainbow-light rainbow-dark

  --display-light-icon: 1 0
  --display-dark-icon: 0 1
})


/* some global styles */
::selection
  background-color: var(--selection-bg)

</style>
<style is:global>
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .card-base {
        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
    }
    h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
        @apply transition;
    }
    .card-shadow {
        @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
    }
    .link {
        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[6px] -m-[6px];
    }
}
</style>