<script>export let style = "default";
export let border = false;
let className = "";
export { className as class };
</script>

<span class="badge {style}{className ? ` ${className}` : ''}" class:has-border={border}>
  <slot />
</span>

<style>
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem
}
  .badge.default {
    --tw-bg-opacity: 1;
    background-color: rgb(229 229 229 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / var(--tw-text-opacity))
}
  .badge.info {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity))
}
  .badge.success {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity))
}
  .badge.warn {
    --tw-bg-opacity: 1;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(146 64 14 / var(--tw-text-opacity))
}
  .badge.error {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(153 27 27 / var(--tw-text-opacity))
}
  .badge.has-border {
    border-width: 1px;
    font-weight: 600
}
  .badge.has-border.default {
    --tw-border-opacity: 1;
    border-color: rgb(212 212 212 / var(--tw-border-opacity))
}
  .badge.has-border.info {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity))
}
  .badge.has-border.success {
    --tw-border-opacity: 1;
    border-color: rgb(134 239 172 / var(--tw-border-opacity))
}
  .badge.has-border.warn {
    --tw-border-opacity: 1;
    border-color: rgb(252 211 77 / var(--tw-border-opacity))
}
  .badge.has-border.error {
    --tw-border-opacity: 1;
    border-color: rgb(252 165 165 / var(--tw-border-opacity))
}
</style>
