// =============================================================================
// Button
// =============================================================================

@use '../variables' as *;
@use '../mixins' as *;

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: $font-sans;
  font-weight: $font-weight-medium;
  border: none;
  border-radius: $radius;
  cursor: pointer;
  @include transition-fast(color, background-color, border-color, box-shadow);

  &:focus {
    outline: none;
  }

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

// Sizes
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
}

.btn-md {
  padding: 0.5rem 1rem;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
}

.btn-lg {
  padding: 0.625rem 1.25rem;
  font-size: $font-size-base;
  line-height: $line-height-base;
}

// Variants
.btn-primary {
  background-color: $primary-500;
  color: #fff;

  &:hover { background-color: $primary-600; }
  &:active { background-color: $primary-700; }
  &:focus { box-shadow: 0 0 0 3px rgba($primary-500, 0.3); }
}

.btn-secondary {
  background-color: #fff;
  color: $neutral-700;
  border: 1px solid $neutral-300;

  &:hover { background-color: $neutral-50; }
  &:active { background-color: $neutral-100; }
  &:focus { box-shadow: 0 0 0 3px rgba($neutral-500, 0.3); }

  .dark & {
    background-color: $neutral-800;
    color: $neutral-200;
    border-color: $neutral-600;

    &:hover { background-color: $neutral-700; }
    &:active { background-color: $neutral-600; }
  }
}

.btn-ghost {
  background-color: transparent;
  color: $neutral-600;

  &:hover { background-color: $neutral-100; }
  &:active { background-color: $neutral-200; }
  &:focus { box-shadow: 0 0 0 3px rgba($neutral-500, 0.3); }

  .dark & {
    color: $neutral-300;

    &:hover { background-color: $neutral-700; }
    &:active { background-color: $neutral-600; }
  }
}

.btn-danger {
  background-color: $error-500;
  color: #fff;

  &:hover { background-color: $error-600; }
  &:active { background-color: $error-700; }
  &:focus { box-shadow: 0 0 0 3px rgba($error-500, 0.3); }
}

// Icon-only button
.btn-icon {
  padding: 0.5rem;
  border-radius: $radius;

  &.btn-sm { padding: 0.375rem; }
  &.btn-lg { padding: 0.625rem; }
}

// Empty — transparent, muted, minimal hover (for inline icon actions)
.btn-empty {
  background: none;
  color: $neutral-400;
  padding: 0;

  &:hover {
    color: $neutral-700;
    background: rgba(0, 0, 0, 0.06);
  }

  &:active { background: rgba(0, 0, 0, 0.1); }
  &:focus { box-shadow: none; }

  .dark & {
    color: $neutral-500;

    &:hover {
      color: $neutral-200;
      background: rgba(255, 255, 255, 0.1);
    }

    &:active { background: rgba(255, 255, 255, 0.15); }
  }
}

.btn-empty.btn-confirm {
  color: $success-500;

  &:hover {
    color: $success-700;
    background: rgba($success-500, 0.1);
  }
}

.btn-empty.btn-cancel {
  color: $neutral-400;

  &:hover {
    color: $error-500;
    background: rgba($error-500, 0.1);
  }
}

// Dashed — dashed border, transparent, for "add" actions
.btn-dash {
  background: none;
  color: $neutral-500;
  border: 1px dashed $neutral-300;
  border-radius: $radius;
  @include transition-fast(color, background-color, border-color);

  &:hover {
    color: $primary-600;
    border-color: $primary-300;
    background: rgba($primary-500, 0.04);
  }

  &:focus { box-shadow: none; }

  .dark & {
    border-color: $neutral-600;
    color: $neutral-400;

    &:hover {
      color: $primary-400;
      border-color: rgba($primary-500, 0.3);
      background: rgba($primary-500, 0.06);
    }
  }
}

// Fixed square sizes for icon-only empty buttons
.btn-xs {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: $radius-sm;
  font-size: $font-size-xs;
  line-height: 1;
}

// Full width
.btn-block {
  display: flex;
  width: 100%;
}
