.btn {
  @include button-base;
  @include button-size($spacing-sm, $spacing-base, $font-size-base);
  
  &--primary {
    @include button-variant($primary-color);
  }
  
  &--secondary {
    @include button-variant($secondary-color);
  }
  
  &--success {
    @include button-variant($success-color);
  }
  
  &--warning {
    @include button-variant($warning-color);
  }
  
  &--error {
    @include button-variant($error-color);
  }
  
  &--outline {
    background-color: transparent;
    color: $primary-color;
    border: 1px solid $primary-color;
    
    &:hover:not(:disabled) {
      background-color: $primary-color;
      color: #fff;
    }
  }
  
  &--ghost {
    background-color: transparent;
    color: $primary-color;
    border: 1px solid transparent;
    
    &:hover:not(:disabled) {
      background-color: rgba($primary-color, 0.1);
    }
  }
  
  &--sm {
    @include button-size($spacing-xs, $spacing-sm, $font-size-sm);
  }
  
  &--lg {
    @include button-size($spacing-md, $spacing-lg, $font-size-lg);
  }
  
  &--xl {
    @include button-size($spacing-base, $spacing-xl, $font-size-xl);
  }
  
  &--full {
    width: 100%;
  }
  
  &--icon {
    @include button-size($spacing-sm, $spacing-sm, $font-size-base);
    
    &.btn--sm {
      @include button-size($spacing-xs, $spacing-xs, $font-size-sm);
    }
    
    &.btn--lg {
      @include button-size($spacing-md, $spacing-md, $font-size-lg);
    }
  }
}