Weather Widget Compact

<div
  class="ws-weather-widget inline-flex items-center gap-3 rounded-full border px-4 py-2"
  style="
    --ws-weather-widget-bg: oklch(0.98 0.005 75);
    --ws-weather-widget-text: oklch(0.25 0.02 75);
    --ws-weather-widget-text-soft: oklch(0.45 0.015 75);
    --ws-weather-widget-text-muted: oklch(0.6 0.01 75);
    --ws-weather-widget-border: oklch(0.9 0.01 75);
    --ws-weather-widget-accent: oklch(0.55 0.12 250);
    --ws-weather-widget-accent-soft: oklch(0.92 0.04 250);
    background: var(--ws-weather-widget-bg);
    color: var(--ws-weather-widget-text);
    border-color: var(--ws-weather-widget-border);
  "
>
  <span class="text-lg" role="img" aria-label="Partly cloudy">⛅</span>
  <span class="text-base font-semibold" style="color: var(--ws-weather-widget-text)">18°</span>
  <span
    class="h-4 w-px"
    style="background: var(--ws-weather-widget-border)"
  ></span>
  <span class="text-sm font-medium" style="color: var(--ws-weather-widget-text-soft)">San Francisco</span>
</div>