@layer components {
  .alert {
    padding: var(--spacing-md);
    border-radius: 0.5rem;
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .alert-danger {
    background-color: var(--color-error-soft);
    border: 1px solid color-mix(in oklab, var(--color-error) 20%, transparent);
    color: var(--color-error-strong);
  }

  .alert-success {
    background-color: var(--color-success-soft);
    border: 1px solid color-mix(in oklab, var(--color-success) 20%, transparent);
    color: var(--color-success-strong);
  }

  .alert-info {
    background-color: var(--color-info-soft);
    border: 1px solid color-mix(in oklab, var(--color-info) 20%, transparent);
    color: var(--color-info-strong);
  }

  .alert-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  .alert-danger .alert-icon {
    color: var(--color-error);
  }

  .alert-success .alert-icon {
    color: var(--color-success);
  }

  .alert-info .alert-icon {
    color: var(--color-info);
  }

  .alert-content {
    flex-grow: 1;
  }

  .alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .alert-list {
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 0.25rem;
  }
}