@utility status {
  & {
    @apply border-scaffold;
    padding: 1rem;
    color: var(--text-color);
    background-color: var(--bg-color);

    &:empty {
      display: none;
    }
  }
}

@utility status-info {
  & {
    --border-color: #d1d5db;
    --bg-color: #f9fafb;
    --text-color: #111827;
  }
}

@utility status-error {
  & {
    --border-color: #fca5a5;
    --bg-color: #fef2f2;
    --text-color: #b91c1c;
  }
}

@utility status-success {
  & {
    --border-color: #86efac;
    --bg-color: #f0fdf4;
    --text-color: #15803d;
  }
}