/**
 * @name Retro Button
 * @group components
 * @description
 * Button component with multiple color, size, and effect variants. Use modifier classes for color, size, shape, and effects.
 * @example scss
 *   <button class="retro-btn retro-btn-primary retro-btn-lg" role="button">Primary Large</button>
 */
 
@use "../variables" as *;
@use "../mixins" as *;
@use "sass:color";

/* Retro Button - Win9x Style Only */

// Bevel shadows. These were SCSS variables, which compile to fixed hexes and
// so ignored the dark theme's border tokens entirely.
$retro-btn-shadow-raised: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-dark), 1px 1px 0 var(--retro-border-medium);
$retro-btn-shadow-pressed: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-dark), 0.5px 0.5px 0 var(--retro-border-medium);
$retro-btn-shadow-hover-default: inset -0.5px -0.5px 0 var(--retro-border-light), inset 0.5px 0.5px 0 var(--retro-border-medium);

.retro-btn {
  display: inline-block;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  font-weight: var(--retro-font-weight-normal);
  line-height: var(--retro-line-height-tight);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  padding: var(--retro-spacing-xs) var(--retro-spacing-md);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  background: var(--retro-light);
  color: var(--retro-text);
  box-shadow: $retro-btn-shadow-raised;
  transition: none;

  &:hover {
    background: var(--retro-white);
    box-shadow: $retro-btn-shadow-hover-default;
  }

  &:active {
    background: var(--retro-border-medium);
    color: var(--retro-text-inverse);
    box-shadow: $retro-btn-shadow-pressed;
  }

  @include retro-focus;
}

// Filled variants. Previously $retro-* SCSS vars plus color.adjust(), both of
// which compile to fixed hexes -- so a dark-theme button kept its light fill
// and carried hardcoded white text over it.
//
// .retro-btn-secondary rides the neutral gray; the demo pages referenced both
// it and .retro-btn-info without either existing.
@each $n in "primary", "success", "danger", "warning", "info", "teal" {
  .retro-btn-#{$n} {
    background: var(--retro-#{$n});
    color: var(--retro-#{$n}-fg);
    &:hover { background: var(--retro-#{$n}-hover); }
    &:active { background: var(--retro-#{$n}-active); }
  }
}

// Button sizes. Line-height now inherits the single tight value from
// .retro-btn; the previous 1.2->1.7 ladder grew leading with size and made the
// xxl button needlessly tall.
.retro-btn-xs {
  font-size: var(--retro-font-size-xs);
  padding: 2px 8px;
}

.retro-btn-sm {
  font-size: var(--retro-font-size-sm);
  padding: 3px 10px;
}

.retro-btn-md {
  font-size: var(--retro-font-size);
  padding: 4px 12px;
}

.retro-btn-lg {
  font-size: var(--retro-font-size-lg);
  padding: 6px 16px;
}

.retro-btn-xl {
  font-size: var(--retro-font-size-xl);
  padding: 8px 20px;
}

.retro-btn-xxl {
  font-size: var(--retro-font-size-2xl);
  padding: 10px 24px;
}

.retro-btn-secondary {
  background: var(--retro-gray);
  color: var(--retro-gray-fg);
  &:hover { background: var(--retro-gray-hover); }
  &:active { background: var(--retro-gray-active); }
}

/// Full-width button, for stacked forms.
.retro-btn-block {
  display: block;
  width: 100%;
}