---
import type { Aside as BaseProps } from "@astrojs/starlight/components";

type Props = Parameters<typeof BaseProps>[0];

const { type = "note" } = Astro.props;

const symbols = {
  note: "●",
  tip: "◆",
  caution: "▲",
  danger: "■",
};
---

<box-gleam>
  <aside class:list={["aside", `type-${type}`]}>
    <h2 class="label font-mono">
      <span class="symbol">{symbols[type]}</span>
      {type}
    </h2>
    <slot />
  </aside>
</box-gleam>

<style>
  :root {
    --c-space: srgb;
    --c-blue: var(--c-space) 0 90% 1;
    --c-green: var(--c-space) 0 1 25%;
    --c-yellow: var(--c-space) 1 90% 15%;
    --c-red: var(--c-space) 1 25% 25%;
    @media (dynamic-range: high) {
      @supports (color: color(display-p3 1 1 1)) {
        --c-space: display-p3;
      }
    }
  }
  .label,
  .aside :global(code) {
    --_mod: 0.67;
    --text: color(
      from color(var(--color)) srgb calc(r + var(--_mod)) calc(g + var(--_mod))
        calc(b + var(--_mod)) / 100%
    );
    font-size: 1rem;
    color: var(--text);
    margin: 0;
    text-box: trim-both cap alphabetic;
    position: relative;
  }
  .aside :global(code) {
    --text-10: color(from var(--text) srgb r g b / 10%);
    --text-50: color(from var(--text) srgb r g b / 50%);
    border-top: 2px solid var(--text-10);
    /* border-bottom: 1px solid var(--text-10); */
    padding: 0.05ch 0.33ch;
    border-radius: 4px;
    background: var(--text-10);
    /* https://smoothshadows.com/#djEsMiw1LDAuMDcsMjQsMzIsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
    box-shadow:
      0px 1px 1px rgba(3, 7, 18, 0.07),
      0px 5px 4px rgba(3, 7, 18, 0.06),
      0px 12px 9px rgba(3, 7, 18, 0.04),
      0px 20px 15px rgba(3, 7, 18, 0.03),
      0px 32px 24px rgba(3, 7, 18, 0.01);
  }
  .label {
    text-transform: uppercase;
  }
  .label::after {
    --_s-line: 1px;
    --_s-gap: 2px;

    content: "";
    position: absolute;
    inset: 0;
    left: var(--inset, 0);
    background: repeating-linear-gradient(
      to right,
      transparent 0,
      var(--text) var(--_s-line),
      transparent var(--_s-line),
      transparent calc(var(--_s-line) + var(--_s-gap))
    );
    mask-image: linear-gradient(
      in lab to right,
      rgb(0 0 0 / 0%),
      rgb(0 0 0 / 90%)
    );
  }
  .type-note {
    --color: var(--c-blue);
    --inset: 8ch;
  }
  .type-tip {
    --color: var(--c-green);
    --inset: 6ch;
  }
  .type-caution {
    --color: var(--c-yellow);
    --inset: 10ch;
  }
  .type-danger {
    --color: var(--c-red);
    --inset: 9ch;
  }
  .aside {
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    gap: 8px;

    position: relative;
    aspect-ratio: 3 / 1;
    width: 320px;

    --_border-width: 2px;
    --_corner: 12px;

    background: linear-gradient(
      to bottom,
      color(var(--color) / 90%),
      color(var(--color) / 50%)
    );
    isolation: isolate;
    box-shadow:
      0px 1px 1px color(var(--color) / 0.07),
      0px 5px 4px color(var(--color) / 0.06),
      0px 12px 9px color(var(--color) / 0.04),
      0px 20px 15px color(var(--color) / 0.03),
      0px 32px 24px color(var(--color) / 0.01);
  }
  .aside::before {
    content: "";
    inset: var(--_border-width);
    clip-path: polygon(
      var(--_corner) 0,
      calc(100% - var(--_corner)) 0,
      100% var(--_corner),
      100% calc(100% - var(--_corner)),
      calc(100% - var(--_corner)) 100%,
      var(--_corner) 100%,
      0 calc(100% - var(--_corner)),
      0 var(--_corner)
    );
    pointer-events: none;

    background: var(--c-background)
      radial-gradient(
        400% 200% at center top,
        color(var(--color) / 50%),
        color(var(--color) / 10%)
      );

    position: absolute;
    z-index: -1;
  }
  .aside::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }
</style>

<style>
  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  @property --x {
    syntax: "<percentage>";
    initial-value: 35%;
    inherits: false;
  }

  @property --shine {
    syntax: "<color>";
    initial-value: transparent;
    inherits: false;
  }

  @property --shadow-strength {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: false;
  }

  :root {
    --h: 240;
    --s: 0%;
    --l: 100%;
    --surface-1: hsl(var(--h) var(--s) calc(var(--l) + 4%) / 0);
    --surface-2: hsl(var(--h) var(--s) calc(var(--l) + 8%) / 0);
    --surface-3: hsl(var(--h) var(--s) calc(var(--l) + 15%) / 1);
    --shadow-color: var(--h) var(--s) 15%;
    --shadow-strength: 1%;
    --shadow: 0 -2px 5px 0 hsl(var(--shadow-color) /
            calc(var(--shadow-strength) + 2%)),
      0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
      0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
      0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
      0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
      0 16px 16px -2px hsl(var(--shadow-color) /
            calc(var(--shadow-strength) + 6%));
    --space: 1rem;
  }

  .aside::after {
    --_gleam: linear-gradient(
        60deg,
        transparent 40%,
        var(--surface-3),
        transparent 70%
      )
      var(--x) 0 / 600% 100% padding-box;
    --_gleam-cover: radial-gradient(
        circle at center,
        var(--surface-1),
        transparent
      )
      padding-box;
    --_cover: linear-gradient(var(--surface-1), var(--surface-1)) padding-box;
    --_shine: conic-gradient(
        from var(--angle) at 20px 32px,
        var(--shine),
        transparent 20% 80%,
        var(--shine)
      )
      border-box;
    --_edges: linear-gradient(
        30deg,
        var(--surface-3),
        var(--surface-2) 20% 80%,
        var(--surface-3)
      )
      border-box;

    display: grid;
    position: relative;
    border: 2px solid transparent;
    background: var(--_gleam-cover), var(--_gleam), var(--_cover), var(--_shine),
      var(--_edges);
    mix-blend-mode: overlay;
    opacity: 33%;
  }

  @supports (animation-timeline: view()) {
    .aside::after {
      animation: linear both;
      animation-name: gleam, shine, shadow;
      animation-timeline: view();
      animation-range:
        cover -10% cover 100%,
        entry 0% cover 65%,
        entry 0% exit 150%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .aside::after {
      animation: none !important;
    }
  }

  @keyframes gleam {
    from {
      --angle: -1turn;
      --x: 0%;
    }
    to {
      --angle: 1turn;
      --x: 100%;
    }
  }

  @keyframes shadow {
    from,
    to {
      box-shadow: none;
    }
    50%,
    65% {
      box-shadow: var(--shadow);
    }
  }

  @keyframes shine {
    0%,
    45% {
      --shine: transparent;
    }
    80% {
      --shine: hsl(var(--h) var(--s) calc(var(--l) + 38%));
    }
  }
</style>