<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    glow?: number;
    lift?: number;
  }>(),
  { label: "Play now", accent: "#FF6A1F", glow: 10, lift: 2 },
);

const CHARCOAL = "#16140F";

function hexToRgba(hex: string, alpha: number): string {
  const clean = hex.replace("#", "");
  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
  const value = Number.parseInt(full, 16);
  const r = (value >> 16) & 255;
  const g = (value >> 8) & 255;
  const b = value & 255;
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

const hovered = ref(false);
const focused = ref(false);
const pressed = ref(false);
const reducedMotion = ref(false);
let mql: MediaQueryList | null = null;

function handleChange(event: MediaQueryListEvent) {
  reducedMotion.value = event.matches;
}

onMounted(() => {
  mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mql.matches;
  mql.addEventListener("change", handleChange);
});
onUnmounted(() => {
  mql?.removeEventListener("change", handleChange);
});

const swapped = computed(() => hovered.value || focused.value);
const ground = computed(() => (swapped.value ? CHARCOAL : props.accent));
const ink = computed(() => (swapped.value ? props.accent : "#FFFFFF"));
const spread = computed(() => (reducedMotion.value ? props.glow : swapped.value ? props.glow * 2.6 : props.glow));
const glowAlpha = computed(() => (swapped.value ? 0.32 : 0.55));
const liftActive = computed(() => (reducedMotion.value ? 0 : swapped.value && !pressed.value ? props.lift : 0));
const duration = computed(() => (reducedMotion.value ? 0 : 200));

const buttonStyle = computed(() => ({
  backgroundColor: ground.value,
  color: ink.value,
  boxShadow: `0 0 ${spread.value}px ${hexToRgba(ground.value, glowAlpha.value)}`,
  transform: `translateY(${-liftActive.value}px)`,
  transitionProperty: "background-color, color, box-shadow, transform",
  transitionDuration: `${duration.value}ms`,
  transitionTimingFunction: "cubic-bezier(0.2, 0.8, 0.2, 1)",
  outlineColor: props.accent,
}));

function press() {
  pressed.value = true;
}
function release() {
  pressed.value = false;
}
function onKeydown(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = true;
}
function onKeyup(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = false;
}
</script>

<template>
  <button
    type="button"
    class="color-swap-play"
    :style="buttonStyle"
    @mouseenter="hovered = true"
    @mouseleave="
      hovered = false;
      pressed = false;
    "
    @mousedown="press"
    @mouseup="release"
    @focus="focused = true"
    @blur="
      focused = false;
      pressed = false;
    "
    @keydown="onKeydown"
    @keyup="onKeyup"
  >
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="color-swap-play__glyph">
      <path d="M7.4 4.6c0-1.4 1.5-2.3 2.7-1.6l10.1 6.4c1.2.8 1.2 2.5 0 3.3L10.1 19c-1.2.7-2.7-.1-2.7-1.6z" />
    </svg>
    <span>{{ label }}</span>
  </button>
</template>

<style scoped>
.color-swap-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 20px;
  font: 700 18px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.color-swap-play:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 2px;
}
.color-swap-play__glyph {
  flex-shrink: 0;
}
</style>

1f:Td47, 20:Tb5aa,

<script lang="ts">
  let {
    label = "Play now",
    accent = "#FF6A1F",
    glow = 10,
    lift = 2,
  }: { label?: string; accent?: string; glow?: number; lift?: number } = $props();

  const CHARCOAL = "#16140F";

  function hexToRgba(hex: string, alpha: number): string {
    const clean = hex.replace("#", "");
    const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
    const value = Number.parseInt(full, 16);
    const r = (value >> 16) & 255;
    const g = (value >> 8) & 255;
    const b = value & 255;
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  }

  let hovered = $state(false);
  let focused = $state(false);
  let pressed = $state(false);
  let reducedMotion = $state(false);

  $effect(() => {
    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
    reducedMotion = mql.matches;
    const handler = (event: MediaQueryListEvent) => {
      reducedMotion = event.matches;
    };
    mql.addEventListener("change", handler);
    return () => mql.removeEventListener("change", handler);
  });

  let swapped = $derived(hovered || focused);
  let ground = $derived(swapped ? CHARCOAL : accent);
  let ink = $derived(swapped ? accent : "#FFFFFF");
  let spread = $derived(reducedMotion ? glow : swapped ? glow * 2.6 : glow);
  let glowAlpha = $derived(swapped ? 0.32 : 0.55);
  let liftActive = $derived(reducedMotion ? 0 : swapped && !pressed ? lift : 0);
  let duration = $derived(reducedMotion ? 0 : 200);
  let buttonStyle = $derived(
    `background-color: ${ground}; color: ${ink}; box-shadow: 0 0 ${spread}px ${hexToRgba(ground, glowAlpha)}; ` +
      `transform: translateY(${-liftActive}px); transition-property: background-color, color, box-shadow, transform; ` +
      `transition-duration: ${duration}ms; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); outline-color: ${accent};`,
  );

  function press() {
    pressed = true;
  }
  function release() {
    pressed = false;
  }
  function onKeydown(event: KeyboardEvent) {
    if (event.key === "Enter" || event.key === " ") pressed = true;
  }
  function onKeyup(event: KeyboardEvent) {
    if (event.key === "Enter" || event.key === " ") pressed = false;
  }
</script>

<button
  type="button"
  class="color-swap-play"
  style={buttonStyle}
  onmouseenter={() => (hovered = true)}
  onmouseleave={() => {
    hovered = false;
    pressed = false;
  }}
  onmousedown={press}
  onmouseup={release}
  onfocus={() => (focused = true)}
  onblur={() => {
    focused = false;
    pressed = false;
  }}
  onkeydown={onKeydown}
  onkeyup={onKeyup}
>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="glyph">
    <path d="M7.4 4.6c0-1.4 1.5-2.3 2.7-1.6l10.1 6.4c1.2.8 1.2 2.5 0 3.3L10.1 19c-1.2.7-2.7-.1-2.7-1.6z" />
  </svg>
  <span>{label}</span>
</button>

<style>
  .color-swap-play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 20px;
    font: 700 18px/1 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    user-select: none;
    outline: none;
  }
  .color-swap-play:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-offset: 2px;
  }
  .glyph {
    flex-shrink: 0;
  }
</style>

Nearby