Alert

<c-lb.alert><span>Basic Alert Message</span></c-lb.alert>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info"><span>Info Alert</span></c-lb.alert>
  <c-lb.alert variant="success"><span>Success Alert</span></c-lb.alert>
  <c-lb.alert variant="warning"><span>Warning Alert</span></c-lb.alert>
  <c-lb.alert variant="error"><span>Error Alert</span></c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" icon="rmx.information"><span>Information message with icon</span></c-lb.alert>
  <c-lb.alert variant="success" icon="rmx.check"><span>Success message with icon</span></c-lb.alert>
  <c-lb.alert variant="warning" icon="rmx.alert"><span>Warning message with icon</span></c-lb.alert>
  <c-lb.alert variant="error" icon="rmx.close-circle"><span>Error message with icon</span></c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" icon="rmx.information">
    <div>We use cookies for analytics.</div>
    <c-slot name="actions">
      <div class="flex gap-2">
        <c-lb.button size="sm">Accept</c-lb.button>
      </div>
    </c-slot>
  </c-lb.alert>

  <c-lb.alert variant="warning" icon="rmx.alert">
    <div>This action cannot be undone.</div>
    <c-slot name="actions">
      <div class="flex gap-2">
        <c-lb.button variant="warning" size="sm">Dismiss</c-lb.button>
      </div>
    </c-slot>
  </c-lb.alert>

  <c-lb.alert variant="error" icon="rmx.error-warning">
    <div>Failed to save changes.</div>
    <c-slot name="actions">
      <div class="flex gap-2">
        <c-lb.button variant="error" size="sm">Retry</c-lb.button>
        <c-lb.button btnStyle="ghost" size="sm">Cancel</c-lb.button>
      </div>
    </c-slot>
  </c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" icon="rmx.information"></c-lb.alert>
  <c-lb.alert variant="success" icon="rmx.check"></c-lb.alert>
  <c-lb.alert variant="warning" icon="rmx.alert"></c-lb.alert>
  <c-lb.alert variant="error" icon="rmx.close-circle"></c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" icon.fill="rmx.star"><span>Filled star icon</span></c-lb.alert>
  <c-lb.alert variant="success" icon.fill="rmx.heart"><span>Filled heart icon</span></c-lb.alert>
  <c-lb.alert variant="warning" icon.fill="rmx.thumb-up"><span>Filled thumb up icon</span></c-lb.alert>
  <c-lb.alert variant="error" icon.fill="rmx.flag"><span>Filled flag icon</span></c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" alertStyle="outline"><span>Outline style alert</span></c-lb.alert>
  <c-lb.alert variant="success" alertStyle="dash"><span>Dash style alert</span></c-lb.alert>
  <c-lb.alert variant="warning" alertStyle="soft"><span>Soft style alert</span></c-lb.alert>
  <c-lb.alert variant="error" alertStyle="outline"><span>Error with outline style</span></c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" direction="vertical" icon="rmx.information">
    <div>
      <h3 class="font-bold">Vertical Alert</h3>
      <div class="text-xs">This is a vertical layout alert</div>
    </div>
  </c-lb.alert>

  <c-lb.alert variant="success" direction="horizontal" icon="rmx.check">
    <div>
      <h3 class="font-bold">Horizontal Alert</h3>
      <div class="text-xs">This is a horizontal layout alert</div>
    </div>
  </c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="info" direction="vertical" class="sm:alert-horizontal" icon="rmx.information">
    <div>
      <h3 class="font-bold">Responsive Alert</h3>
      <div class="text-xs">Vertical on mobile, horizontal on desktop</div>
    </div>
    <c-slot name="actions">
      <c-lb.button size="sm">See</c-lb.button>
    </c-slot>
  </c-lb.alert>

  <c-lb.alert variant="success" direction="vertical" class="sm:alert-horizontal" icon="rmx.check">
    <span>Your purchase has been confirmed!</span>
    <c-slot name="actions">
      <c-lb.button variant="success" size="sm">Continue</c-lb.button>
    </c-slot>
  </c-lb.alert>
</div>

<div class="flex flex-col gap-4">
  <c-lb.alert variant="success" icon="rmx.check" class="shadow-lg">
    <div><span class="font-bold">Success!</span> Your changes have been saved successfully.</div>
    <c-slot name="actions">
      <div class="flex gap-2">
        <c-lb.button variant="success" size="sm">Continue</c-lb.button>
      </div>
    </c-slot>
  </c-lb.alert>

  <c-lb.alert variant="error" icon="rmx.close-circle" class="border-2">
    <div><span class="font-bold">Error:</span> Failed to connect to the server. Please try again.</div>
    <c-slot name="actions">
      <div class="flex gap-2">
        <c-lb.button variant="error" size="sm">Retry</c-lb.button>
        <c-lb.button btnStyle="ghost" size="sm">Cancel</c-lb.button>
      </div>
    </c-slot>
  </c-lb.alert>

  <c-lb.alert variant="warning" alertStyle="soft" icon="rmx.alert" class="bg-warning/10">
    <div><span class="font-bold">Warning:</span> This action cannot be undone.</div>
    <c-slot name="actions">
      <div class="flex gap-2">
        <c-lb.button variant="warning" size="sm">Dismiss</c-lb.button>
      </div>
    </c-slot>
  </c-lb.alert>
</div>