@props([
    'url',
    'color' => 'primary',
    'align' => 'left',
])
@php
    // Map our brand colors for the VML fallback (Outlook 2007–2019 desktop on Windows).
    $bg = match ($color) {
        'success', 'green' => '#16a34a',
        'error', 'red'     => '#dc2626',
        'secondary', 'outline' => '#ffffff',
        default            => '#7C3AED',
    };
    $fg = $color === 'secondary' || $color === 'outline' ? '#18181b' : '#ffffff';
    $stroke = $color === 'secondary' || $color === 'outline' ? '#d4d4d8' : $bg;
@endphp
<table class="action" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="{{ $align }}" style="padding-top: 4px; padding-bottom: 4px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $url }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="14%" stroke="t" strokecolor="{{ $stroke }}" fillcolor="{{ $bg }}">
<w:anchorlock/>
<center style="color:{{ $fg }};font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;letter-spacing:-0.005em;">{!! strip_tags($slot) !!}</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<a href="{{ $url }}" class="button button-{{ $color }}" target="_blank" rel="noopener" style="-webkit-text-size-adjust:none;border-radius:6px;color:{{ $fg }};display:inline-block;font-size:14px;font-weight:600;letter-spacing:-0.005em;line-height:1;overflow:hidden;text-decoration:none;mso-padding-alt:0;background-color:{{ $bg }};border-top:12px solid {{ $stroke }};border-right:22px solid {{ $stroke }};border-bottom:12px solid {{ $stroke }};border-left:22px solid {{ $stroke }};">{!! $slot !!}</a>
<!--<![endif]-->
</td>
</tr>
</table>