Retro Shadow Button

---
/**
 * RetroShadowButton — A sharp-edged neo-brutalist button with a thick solid block shadow.
 * 
 * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
 * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
 * @param {'pink'|'cyan'|'yellow'|'lime'} variant - Optional. The visual highly saturated retro style variant. Default is 'pink'.
 * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
 * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
 */
interface Props {
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'pink' | 'cyan' | 'yellow' | 'lime';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}

const { 
  href, 
  type = 'button', 
  variant = 'pink', 
  size = 'md',
  disabled = false 
} = Astro.props;

const Tag = href ? 'a' : 'button';
---

<Tag 
  href={href} 
  type={href ? undefined : type}
  disabled={disabled}
  class={`retro-shadow-btn retro-shadow-btn--${variant} retro-shadow-btn--${size}`}
>
  <slot />
</Tag>

<style>
  .retro-shadow-btn {
    --btn-bg: #ff7eb3;
    --shadow-color: #000;
    --shadow-offset: 6px;
    
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-bg);
    color: #000;
    border: 3px solid #000;
    font-family: var(--font-sans, inherit);
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.1s;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);
    user-select: none;
    white-space: nowrap;
  }

  .retro-shadow-btn:hover:not(:disabled) {
    transform: translate(calc(var(--shadow-offset) * -0.2), calc(var(--shadow-offset) * -0.2));
    box-shadow: calc(var(--shadow-offset) * 1.2) calc(var(--shadow-offset) * 1.2) 0 var(--shadow-color);
  }

  .retro-shadow-btn:active:not(:disabled) {
    transform: translate(calc(var(--shadow-offset) * 0.5), calc(var(--shadow-offset) * 0.5));
    box-shadow: calc(var(--shadow-offset) * 0.5) calc(var(--shadow-offset) * 0.5) 0 var(--shadow-color);
  }

  .retro-shadow-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.5);
    box-shadow: 2px 2px 0 var(--shadow-color);
  }

  /* Variants (90s Palette) */
  .retro-shadow-btn--pink { --btn-bg: #ff7eb3; }
  .retro-shadow-btn--cyan { --btn-bg: #00f5ff; }
  .retro-shadow-btn--yellow { --btn-bg: #fff01f; }
  .retro-shadow-btn--lime { --btn-bg: #bfff00; }

  /* Sizes */
  .retro-shadow-btn--sm { padding: 0.4rem 1rem; font-size: 0.85rem; --shadow-offset: 4px; border-width: 2px; }
  .retro-shadow-btn--md { padding: 0.7rem 1.6rem; font-size: 1rem; --shadow-offset: 6px; border-width: 3px; }
  .retro-shadow-btn--lg { padding: 1rem 2.2rem; font-size: 1.2rem; --shadow-offset: 8px; border-width: 4px; }
</style>