// Vagabond RPG - Button Styles
// =============================

.vagabond {
  // Primary button
  .btn-primary {
    @include button-primary;
  }

  // Secondary button
  .btn-secondary {
    @include button-secondary;
  }

  // Small button variant
  .btn-sm {
    padding: $spacing-1 $spacing-2;
    font-size: $font-size-xs;
  }

  // Large button variant
  .btn-lg {
    padding: $spacing-3 $spacing-6;
    font-size: $font-size-lg;
  }

  // Icon button (square, for icons only)
  .btn-icon {
    @include button-base;
    @include flex-center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-primary);

    &:hover:not(:disabled) {
      background-color: var(--color-bg-secondary);
      color: var(--color-accent-primary);
    }

    i {
      font-size: $font-size-base;
    }
  }

  // Small icon button (for +/- resource buttons)
  .btn-icon-sm {
    @include button-base;
    @include flex-center;
    width: 24px;
    height: 24px;
    padding: 0;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);

    &:hover:not(:disabled) {
      background-color: var(--color-bg-secondary);
      border-color: var(--color-accent-primary);
      color: var(--color-accent-primary);
    }

    i {
      font-size: 10px;
      color: inherit;
    }
  }

  // Rollable button (for dice rolls)
  .btn-roll {
    @include button-base;
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    border-color: var(--color-border);

    &:hover:not(:disabled) {
      background-color: var(--color-accent-highlight);
      border-color: var(--color-accent-primary);
    }

    i {
      margin-right: $spacing-2;
    }
  }

  // Danger button
  .btn-danger {
    @include button-base;
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: var(--color-danger);

    &:hover:not(:disabled) {
      filter: brightness(0.85);
    }
  }

  // Success button
  .btn-success {
    @include button-base;
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border-color: var(--color-success);

    &:hover:not(:disabled) {
      filter: brightness(0.85);
    }
  }

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

    .btn-primary,
    .btn-secondary {
      border-radius: 0;

      &:first-child {
        border-radius: $radius-md 0 0 $radius-md;
      }

      &:last-child {
        border-radius: 0 $radius-md $radius-md 0;
      }

      &:not(:last-child) {
        border-right: none;
      }
    }
  }
}