@use '../globals' as *;

// =============================================================================
// International Press Zone - Button Component
// =============================================================================
// Based on Comments Press Zone button styles
// =============================================================================

$primary-color: #0073aa !default;
$primary-hover: #005a87 !default;
$success-color: #00a32a !default;
$error-color: #d63638 !default;
$text-primary: #1e1e1e !default;
$text-secondary: #757575 !default;
$background-light: #f0f0f1 !default;
$background-white: #ffffff !default;
$border-color: #c3c4c7 !default;
$border-radius-md: 4px !default;

.international-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: $border-radius-md;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba($primary-color, 0.3);
  }

  // Color Variants
  &--primary {
    background: linear-gradient(135deg, $primary-color, $primary-hover);
    color: #ffffff;

    &:hover:not(:disabled) {
      background: $primary-hover;
    }
  }

  &--secondary {
    background: $background-light;
    color: $text-primary;

    &:hover:not(:disabled) {
      background: $border-color;
    }
  }

  &--ghost {
    background: transparent;
    color: $text-secondary;
    border: 1px solid transparent;

    &:hover:not(:disabled) {
      background: $background-light;
      color: $text-primary;
    }
  }

  &--success {
    background: $success-color;
    color: #ffffff;

    &:hover:not(:disabled) {
      background: darken($success-color, 10%);
    }
  }

  &--danger {
    background: $error-color;
    color: #ffffff;

    &:hover:not(:disabled) {
      background: darken($error-color, 10%);
    }
  }

  // Size Variants
  &--lg {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
  }

  &--sm {
    padding: 4px 10px;
    font-size: 12px;
  }

  // Padding Variants
  &--padding-wide {
    padding: 12px 24px;
  }

  &--padding-standard {
    padding: 10px 20px;
  }

  &--padding-minimal {
    padding: 6px 12px;
  }

  // Styling Variants
  &--styling-square {
    border-radius: 0;
  }

  &--styling-rounded {
    border-radius: $border-radius-md;
  }

  &--styling-pill {
    border-radius: 100px;
  }

  // Border Variants
  &--no-borders {
    border-color: transparent !important;
    box-shadow: none !important;

    &:hover {
      border-color: $border-color !important;
    }
  }
}

// Icon Button
.international-btn-icon {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;

  &:hover {
    opacity: 1;
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba($primary-color, 0.3);
  }

  &--danger {
    &:hover {
      opacity: 1;
      color: $error-color;
    }
  }
}