@use '../variables' as v;
@use '../mixins' as m;
@use 'sass:color';

// ─────────────────────────────────────────────
// Base button
// ─────────────────────────────────────────────
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  height: 36px;
  font-size: v.$font-size-sm;
  font-weight: 500;
  font-family: v.$font-family;
  border-radius: v.$radius;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background v.$transition-base, border-color v.$transition-base,
              color v.$transition-base, box-shadow v.$transition-base, opacity v.$transition-base;
  white-space: nowrap;
  line-height: 1;

  svg { width: 15px; height: 15px; flex-shrink: 0; }

  &:focus-visible { @include m.focus-ring; }

  &:disabled,
  &.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  &.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
  }
}

// ─────────────────────────────────────────────
// Variants
// ─────────────────────────────────────────────
.btn-primary {
  background: v.$primary;
  border-color: v.$primary;
  color: v.$white;

  &:hover { background: v.$primary-hover; border-color: v.$primary-hover; }
  &:active { background: color.adjust(v.$primary, $lightness: -8%); }
}

.btn-outline {
  background: v.$white;
  border-color: v.$border-color-dark;
  color: v.$gray-700;

  &:hover { background: v.$gray-50; border-color: v.$gray-300; color: v.$gray-800; }
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: v.$gray-600;

  &:hover { background: v.$gray-100; color: v.$gray-800; }
}

.btn-danger {
  background: v.$danger;
  border-color: v.$danger;
  color: v.$white;

  &:hover { background: color.adjust(v.$danger, $lightness: -6%); }
}

.btn-danger-outline {
  background: v.$white;
  border-color: v.$danger-border;
  color: v.$danger;

  &:hover { background: v.$danger-light; }
}

.btn-success {
  background: v.$success;
  border-color: v.$success;
  color: v.$white;

  &:hover { background: color.adjust(v.$success, $lightness: -6%); }
}

// ─────────────────────────────────────────────
// Sizes
// ─────────────────────────────────────────────
.btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: v.$font-size-xs;
  border-radius: v.$radius-sm;

  svg { width: 13px; height: 13px; }
}

.btn-lg {
  height: 42px;
  padding: 0 22px;
  font-size: v.$font-size-base;

  svg { width: 17px; height: 17px; }
}

.btn-xl {
  height: 48px;
  padding: 0 28px;
  font-size: v.$font-size-md;
}

// ─────────────────────────────────────────────
// Icon-only button
// ─────────────────────────────────────────────
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;

  &.btn-sm { width: 30px; height: 30px; }
  &.btn-lg { width: 42px; height: 42px; }
}

// ─────────────────────────────────────────────
// Button group
// ─────────────────────────────────────────────
.btn-group {
  display: inline-flex;

  .btn {
    border-radius: 0;

    &:first-child { border-radius: v.$radius 0 0 v.$radius; }
    &:last-child  { border-radius: 0 v.$radius v.$radius 0; }
    &:not(:first-child) { margin-left: -1px; }
  }
}
