:host { display: block; }
.hb-alert {
  display: flex; align-items: flex-start; gap: var(--hb-spacing-xs);
  padding: var(--hb-spacing-sm) var(--hb-spacing-md);
  border-radius: var(--hb-border-radius-base);
  font-size: var(--hb-font-size-sm);
  line-height: 1.5;
}
.hb-alert--center { justify-content: center; text-align: center; }
.hb-alert__icon { font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.hb-alert__body { flex: 1; }
.hb-alert__title { font-weight: 600; }
.hb-alert__description { margin-top: 4px; font-size: var(--hb-font-size-xs); opacity: 0.85; }
.hb-alert__close { cursor: pointer; font-size: 16px; opacity: 0.6; flex-shrink: 0; }
.hb-alert__close:hover { opacity: 1; }

.hb-alert--success { background: var(--hb-color-success-bg); color: var(--hb-color-success); border: 1px solid var(--hb-color-success-border); }
.hb-alert--warning { background: var(--hb-color-warning-bg); color: var(--hb-color-warning); border: 1px solid var(--hb-color-warning-border); }
.hb-alert--error   { background: var(--hb-color-danger-bg); color: var(--hb-color-danger); border: 1px solid var(--hb-color-danger-border); }
.hb-alert--info    { background: var(--hb-color-primary-bg); color: var(--hb-color-primary); border: 1px solid var(--hb-color-primary-border); }
