component Blockquote {
  props {
    quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
    citation: string = ""
    citationTitle: string = ""
    citationUrl: string = ""
    avatarSrc: string = ""
    avatarAlt: string = ""
    size: string = "md"
    color: string = "primary"
    align: string = "left"
    variant: string = "default"
    quoteMark: boolean = true
    italic: boolean = true
    maxWidth: string = "xl"
    class: string = ""
  }

  view {
    <figure
      {...attrs}
      class="wrn-component wrn-next--blockquote wrn-component--color-{color} wrn-component--size-{size} {class}"
      data-size="{size}"
      data-color="{color}"
      data-align="{align}"
      data-variant="{variant}"
      data-italic="{italic}"
      data-max-width="{maxWidth}"
    >
      <blockquote cite="{citationUrl}">
        {#if quoteMark}
          <span class="wrn-next__blockquote-mark" aria-hidden="true">“</span>
        {/if}

        <div class="wrn-next__blockquote-copy">
          {#if quote}
            <p>{quote}</p>
          {:else}
            <slot />
          {/if}
        </div>
      </blockquote>

      {#if citation || citationTitle || avatarSrc}
        <figcaption class="wrn-next__blockquote-citation">
          {#if avatarSrc}
            <img
              class="wrn-next__blockquote-avatar"
              src="{avatarSrc}"
              alt="{avatarAlt}"
              loading="lazy"
            />
          {/if}

          <span class="wrn-next__blockquote-attribution">
            {#if citation}
              {#if citationUrl}
                <cite><a href="{citationUrl}">{citation}</a></cite>
              {:else}
                <cite>{citation}</cite>
              {/if}
            {/if}
            {#if citationTitle}<span>{citationTitle}</span>{/if}
          </span>
        </figcaption>
      {/if}
    </figure>
  }

  style {
    .wrn-next--blockquote {
      --wrn-blockquote-color: var(--wrn-component-color, var(--wrn-color-primary));
      --wrn-blockquote-font-size: 1.125rem;
      --wrn-blockquote-mark-size: 4.25rem;
      display: grid;
      gap: 1.25rem;
      width: 100%;
      max-width: var(--wrn-blockquote-max-width, 48rem);
      color: var(--wrn-color-text);
      text-align: left;
    }

    .wrn-next--blockquote[data-max-width="sm"] { --wrn-blockquote-max-width: 32rem; }
    .wrn-next--blockquote[data-max-width="md"] { --wrn-blockquote-max-width: 40rem; }
    .wrn-next--blockquote[data-max-width="lg"] { --wrn-blockquote-max-width: 48rem; }
    .wrn-next--blockquote[data-max-width="xl"] { --wrn-blockquote-max-width: 64rem; }
    .wrn-next--blockquote[data-max-width="full"] { --wrn-blockquote-max-width: 100%; }

    .wrn-next--blockquote[data-size="xs"] {
      --wrn-blockquote-font-size: 0.875rem;
      --wrn-blockquote-mark-size: 3rem;
    }

    .wrn-next--blockquote[data-size="sm"] {
      --wrn-blockquote-font-size: 1rem;
      --wrn-blockquote-mark-size: 3.5rem;
    }

    .wrn-next--blockquote[data-size="md"],
    .wrn-next--blockquote[data-size="default"] {
      --wrn-blockquote-font-size: 1.125rem;
    }

    .wrn-next--blockquote[data-size="lg"] {
      --wrn-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem);
      --wrn-blockquote-mark-size: 5rem;
    }

    .wrn-next--blockquote[data-size="xl"] {
      --wrn-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem);
      --wrn-blockquote-mark-size: 5.75rem;
    }

    .wrn-next--blockquote > blockquote {
      position: relative;
      display: block;
      min-width: 0;
      margin: 0;
      padding-top: calc(var(--wrn-blockquote-mark-size) * 0.78);
    }

    .wrn-next__blockquote-mark {
      position: absolute;
      top: 0;
      inset-inline: 0;
      display: block;
      width: 100%;
      color: color-mix(in srgb, var(--wrn-blockquote-color) 28%, var(--wrn-color-text));
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--wrn-blockquote-mark-size);
      font-style: normal;
      font-weight: 700;
      line-height: 0.8;
      text-align: start;
      user-select: none;
    }

    .wrn-next__blockquote-copy {
      min-width: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--wrn-blockquote-font-size);
      line-height: 1.55;
      text-wrap: pretty;
    }

    .wrn-next--blockquote[data-italic="true"] .wrn-next__blockquote-copy {
      font-style: italic;
    }

    .wrn-next__blockquote-copy > :first-child {
      margin-top: 0;
    }

    .wrn-next__blockquote-copy > :last-child {
      margin-bottom: 0;
    }

    .wrn-next__blockquote-citation {
      display: inline-flex;
      gap: 0.75rem;
      align-items: center;
      width: fit-content;
      margin-inline-start: 0;
      color: var(--wrn-color-muted);
      font-size: 0.875rem;
      line-height: 1.35;
    }

    .wrn-next__blockquote-avatar {
      width: 2.5rem;
      height: 2.5rem;
      flex: 0 0 auto;
      border: 2px solid color-mix(in srgb, var(--wrn-blockquote-color) 35%, transparent);
      border-radius: 999px;
      object-fit: cover;
    }

    .wrn-next__blockquote-attribution {
      display: grid;
      gap: 0.15rem;
    }

    .wrn-next__blockquote-attribution cite {
      color: var(--wrn-color-text);
      font-style: normal;
      font-weight: 700;
    }

    .wrn-next__blockquote-attribution a {
      color: inherit;
      text-decoration-color: color-mix(in srgb, var(--wrn-blockquote-color) 55%, transparent);
      text-underline-offset: 0.2em;
    }

    .wrn-next__blockquote-attribution a:hover {
      color: var(--wrn-blockquote-color);
    }

    .wrn-next--blockquote[data-align="center"] {
      text-align: center;
      margin-inline: auto;
    }

    .wrn-next--blockquote:is([data-variant="contained"], [data-variant="spotlight"], [data-variant="card"]) {
      padding: clamp(1.5rem, 4vw, 3rem);
      border: 1px solid color-mix(in srgb, var(--wrn-blockquote-color) 24%, var(--wrn-color-border));
      border-radius: calc(var(--wrn-radius) * 2);
      background: linear-gradient(145deg, color-mix(in srgb, var(--wrn-blockquote-color) 8%, var(--wrn-color-surface-raised)), var(--wrn-color-surface-raised));
      box-shadow: var(--wrn-shadow-1);
    }

    .wrn-next--blockquote[data-variant="spotlight"] > blockquote { padding-top: calc(var(--wrn-blockquote-mark-size) * 0.55); }

    .wrn-next--blockquote[data-align="right"],
    .wrn-next--blockquote[data-align="end"] {
      text-align: right;
    }

    .wrn-next--blockquote[data-align="center"] > blockquote,
    .wrn-next--blockquote[data-align="right"] > blockquote,
    .wrn-next--blockquote[data-align="end"] > blockquote {
      text-align: inherit;
    }

    .wrn-next--blockquote[data-align="center"] .wrn-next__blockquote-mark {
      text-align: center;
    }

    .wrn-next--blockquote[data-align="right"] .wrn-next__blockquote-mark,
    .wrn-next--blockquote[data-align="end"] .wrn-next__blockquote-mark {
      text-align: end;
    }

    .wrn-next--blockquote[data-align="center"] .wrn-next__blockquote-citation {
      margin-inline: auto;
    }

    .wrn-next--blockquote[data-align="right"] .wrn-next__blockquote-citation,
    .wrn-next--blockquote[data-align="end"] .wrn-next__blockquote-citation {
      margin-inline-start: auto;
    }

    .wrn-next--blockquote[data-variant="bordered"],
    .wrn-next--blockquote[data-variant="border"],
    .wrn-next--blockquote[data-variant="left-border"] {
      padding-inline-start: 1.5rem;
      border-inline-start: 4px solid var(--wrn-blockquote-color);
    }

    .wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-mark,
    .wrn-next--blockquote[data-variant="border"] .wrn-next__blockquote-mark,
    .wrn-next--blockquote[data-variant="left-border"] .wrn-next__blockquote-mark {
      display: none;
    }

    .wrn-next--blockquote[data-variant="bordered"] > blockquote,
    .wrn-next--blockquote[data-variant="border"] > blockquote,
    .wrn-next--blockquote[data-variant="left-border"] > blockquote {
      display: block;
      padding-top: 0;
    }

    .wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-copy,
    .wrn-next--blockquote[data-variant="border"] .wrn-next__blockquote-copy,
    .wrn-next--blockquote[data-variant="left-border"] .wrn-next__blockquote-copy {
      padding-top: 0;
    }

    .wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-citation,
    .wrn-next--blockquote[data-variant="border"] .wrn-next__blockquote-citation,
    .wrn-next--blockquote[data-variant="left-border"] .wrn-next__blockquote-citation {
      margin-inline-start: 0;
    }

    @media (max-width: 480px) {
    .wrn-next--blockquote {
        --wrn-blockquote-mark-size: 3.25rem;
        --wrn-blockquote-font-size: 1rem;
        gap: 1rem;
      }
    .wrn-next--blockquote[data-size="lg"],
      .wrn-next--blockquote[data-size="xl"] {
        --wrn-blockquote-font-size: 1.25rem;
      }
    .wrn-next__blockquote-citation {
        margin-inline-start: 0;
      }
    }

    /* Shared component foundation. */

        .wrn-component {
          --wrn-component-color: var(--wrn-color-primary);
          --wrn-component-scale: 1;
          margin: 0;
          color: var(--wrn-color-text);
          font-family: var(--wrn-font-sans, inherit);
        }

        .wrn-component--color-primary {
          --wrn-component-color: var(--wrn-color-primary);
        }

        .wrn-component--color-secondary {
          --wrn-component-color: var(--wrn-color-secondary);
        }

        .wrn-component--color-success {
          --wrn-component-color: var(--wrn-color-success);
        }

        .wrn-component--color-warning {
          --wrn-component-color: var(--wrn-color-warning);
        }

        .wrn-component--color-danger {
          --wrn-component-color: var(--wrn-color-danger);
        }

        .wrn-component--color-info {
          --wrn-component-color: var(--wrn-color-info);
        }

        .wrn-component--size-xs {
          --wrn-component-scale: 0.78;
        }

        .wrn-component--size-sm {
          --wrn-component-scale: 0.88;
        }

        .wrn-component--size-default,
        .wrn-component--size-md {
          --wrn-component-scale: 1;
        }

        .wrn-component--size-lg {
          --wrn-component-scale: 1.14;
        }

        .wrn-component--size-xl {
          --wrn-component-scale: 1.28;
        }

        .wrn-component:not(.wrn-btn) {
          font-size: calc(1em * var(--wrn-component-scale));
        }

        .wrn-component :is(a, button, input, select, textarea):focus-visible {
          outline-color: var(--wrn-component-color);
        }

        .wrn-component p {
          margin: 0;
          color: var(--wrn-color-muted);
          line-height: 1.6;
        }
  }
}