/**
 * styles/components/_buttons.less
 *
 * Shared SP button component — single source of truth for all dialog buttons.
 * Imported by each dialog that needs buttons; all selectors scoped under
 * the dialog's own namespace.
 */

// Base button — every dialog button should extend this
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-btn-gap, 6px);
  padding: var(--sp-btn-padding, 7px 14px);
  font-family: var(--font-primary, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--sp-btn-font-size, 12px);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--sp-btn-radius, 5px);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  line-height: 1.2;
  user-select: none;

  i { font-size: 0.9em; pointer-events: none; }

  &:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  // Primary action — green accent
  &--primary {
    background: var(--sp-btn-primary-bg, var(--sp-accent));
    color: var(--sp-btn-primary-text, #fff);
    letter-spacing: 0.02em;

    &:hover:not(:disabled) {
      background: var(--sp-btn-primary-hover, var(--sp-accent-hover));
      color: var(--sp-btn-primary-text, #fff);
    }
    &:active:not(:disabled) {
      background: var(--sp-btn-primary-active, var(--sp-accent-active));
    }
  }

  // Secondary — subtle, neutral
  &--secondary {
    background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
    color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
    border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
    font-weight: 500;

    &:hover:not(:disabled) {
      background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
      color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
    }
  }

  // Danger — red
  &--danger {
    background: var(--sp-btn-danger-bg, var(--sp-color-red));
    color: var(--sp-btn-danger-text, #fff);

    &:hover:not(:disabled) {
      background: var(--sp-btn-danger-hover, var(--sp-color-red-dark));
    }
  }

  // Sizes
  &--sm {
    padding: var(--sp-btn-padding-sm, 4px 10px);
    font-size: var(--sp-btn-font-size-sm, 11px);
  }

  &--lg {
    padding: var(--sp-btn-padding-lg, 9px 18px);
    font-size: var(--sp-btn-font-size-lg, 13px);
  }

  // Icon-only
  &--icon {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 13px;
    justify-content: center;
  }
}