// ==========================================================================
// Monitor.Cat — Alert Boxes
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Base alert
  // ---------------------------------------------------------------------------
  .mc-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: $mc-radius-alert;
    font-family: $mc-font-body;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: $mc-text;
  }

  .mc-alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }

  .mc-alert-content {
    flex: 1;
    min-width: 0;
  }

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

  .mc-alert-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    padding: 4px;
    transition: opacity $mc-transition-base;

    &:hover {
      opacity: 1;
    }
  }

  // ---------------------------------------------------------------------------
  // Color variants
  // ---------------------------------------------------------------------------
  .mc-alert-success {
    background: $mc-mint-light;
    border: 1px solid rgba($mc-mint-strong, 0.2);

    .mc-alert-icon { color: $mc-mint-strong; }
  }

  .mc-alert-warning {
    background: $mc-primary-light;
    border: 1px solid rgba($mc-primary, 0.2);

    .mc-alert-icon { color: $mc-primary; }
  }

  .mc-alert-error {
    background: $mc-coral-light;
    border: 1px solid rgba($mc-coral-strong, 0.2);

    .mc-alert-icon { color: $mc-coral-strong; }
  }

  .mc-alert-info {
    background: $mc-cyan-light;
    border: 1px solid rgba($mc-cyan-strong, 0.2);

    .mc-alert-icon { color: $mc-cyan-strong; }
  }
}