/* =============================================================================
   BlocHost Design System - Buttons
   Button variants, sizes, groups, and states
   ============================================================================= */

/* =========================================================================
   Base Button
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--btn-border-radius);
  background-color: transparent;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:disabled,
.btn.disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

/* =========================================================================
   Primary Button (Brand Orange)
   ========================================================================= */

.btn-primary {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  color: var(--color-white);
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* =========================================================================
   Secondary Button
   ========================================================================= */

.btn-secondary {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  color: var(--color-white);
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-secondary:focus-visible {
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}

/* =========================================================================
   Success Button
   ========================================================================= */

.btn-success {
  color: var(--color-white);
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-success:hover {
  color: var(--color-white);
  background-color: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

.btn-success:focus-visible {
  box-shadow: 0 0 0 3px var(--color-success-light);
}

/* =========================================================================
   Danger Button
   ========================================================================= */

.btn-danger {
  color: var(--color-white);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  color: var(--color-white);
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.btn-danger:focus-visible {
  box-shadow: 0 0 0 3px var(--color-danger-light);
}

/* =========================================================================
   Warning Button
   ========================================================================= */

.btn-warning {
  color: var(--color-dark);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-warning:hover {
  color: var(--color-dark);
  background-color: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}

.btn-warning:focus-visible {
  box-shadow: 0 0 0 3px var(--color-warning-light);
}

/* =========================================================================
   Info Button
   ========================================================================= */

.btn-info {
  color: var(--color-dark);
  background-color: var(--color-info);
  border-color: var(--color-info);
}

.btn-info:hover {
  color: var(--color-dark);
  background-color: var(--color-info-hover);
  border-color: var(--color-info-hover);
}

.btn-info:focus-visible {
  box-shadow: 0 0 0 3px var(--color-info-light);
}

/* =========================================================================
   Light Button
   ========================================================================= */

.btn-light {
  color: var(--color-dark);
  background-color: var(--color-light);
  border-color: var(--color-light);
}

.btn-light:hover {
  color: var(--color-dark);
  background-color: var(--color-light-hover);
  border-color: var(--border-color);
}

.btn-light:focus-visible {
  box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5);
}

/* =========================================================================
   Dark Button
   ========================================================================= */

.btn-dark {
  color: var(--color-white);
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-dark:hover {
  color: var(--color-white);
  background-color: var(--color-dark-hover);
  border-color: var(--color-dark-hover);
}

.btn-dark:focus-visible {
  box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.25);
}

/* =========================================================================
   Outline Button Variants
   ========================================================================= */

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}

.btn-outline-primary:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: transparent;
}

.btn-outline-secondary:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-outline-success {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: transparent;
}

.btn-outline-success:hover {
  color: var(--color-white);
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background-color: transparent;
}

.btn-outline-danger:hover {
  color: var(--color-white);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-outline-warning {
  color: var(--color-warning-text);
  border-color: var(--color-warning);
  background-color: transparent;
}

.btn-outline-warning:hover {
  color: var(--color-dark);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-outline-info {
  color: var(--color-info);
  border-color: var(--color-info);
  background-color: transparent;
}

.btn-outline-info:hover {
  color: var(--color-dark);
  background-color: var(--color-info);
  border-color: var(--color-info);
}

.btn-outline-light {
  color: var(--color-dark);
  border-color: var(--color-light);
  background-color: transparent;
}

.btn-outline-light:hover {
  color: var(--color-dark);
  background-color: var(--color-light);
  border-color: var(--color-light);
}

.btn-outline-dark {
  color: var(--color-dark);
  border-color: var(--color-dark);
  background-color: transparent;
}

.btn-outline-dark:hover {
  color: var(--color-white);
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

/* =========================================================================
   Link Button (Ghost)
   ========================================================================= */

.btn-link {
  color: var(--color-primary);
  background-color: transparent;
  border-color: transparent;
  font-weight: var(--font-weight-normal);
  text-decoration: none;
}

.btn-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.btn-link:focus-visible {
  box-shadow: none;
  text-decoration: underline;
}

.btn-link:disabled,
.btn-link.disabled {
  color: var(--text-muted);
}

/* =========================================================================
   Button Sizes
   ========================================================================= */

.btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

.btn-lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-xl);
}

/* =========================================================================
   Block Button
   ========================================================================= */

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

/* =========================================================================
   Button Group
   ========================================================================= */

.btn-group {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}

.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group > .btn:not(:first-child) {
  margin-left: calc(var(--btn-border-width) * -1);
}

.btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 1;
}

/* Vertical button group */
.btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.btn-group-vertical > .btn {
  width: 100%;
}

.btn-group-vertical > .btn:not(:first-child) {
  margin-top: calc(var(--btn-border-width) * -1);
  margin-left: 0;
}

.btn-group-vertical > .btn:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group-vertical > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* =========================================================================
   Close Button
   ========================================================================= */

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  color: var(--color-dark);
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: var(--radius-md);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.btn-close:hover {
  opacity: 0.75;
}

.btn-close:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  opacity: 1;
}

.btn-close:disabled,
.btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
}

/* White close button for dark backgrounds */
.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* =========================================================================
   Icon Buttons
   ========================================================================= */

.btn-icon {
  padding: var(--btn-padding-y);
  width: 2.5rem;
  height: 2.5rem;
}

.btn-icon.btn-sm {
  width: 2rem;
  height: 2rem;
}

.btn-icon.btn-lg {
  width: 3rem;
  height: 3rem;
}

/* =========================================================================
   Button with Loading State
   ========================================================================= */

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: btn-spinner 0.75s linear infinite;
}

@keyframes btn-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================================
   Button Check (Toggle Buttons)
   ========================================================================= */

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-check:checked + .btn {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-check:focus + .btn {
  box-shadow: var(--shadow-focus);
}

.btn-check:checked + .btn-outline-primary {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.btn-check:checked + .btn-outline-secondary {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.btn-check:checked + .btn-outline-success {
  color: var(--color-white);
  background-color: var(--color-success);
}

.btn-check:checked + .btn-outline-danger {
  color: var(--color-white);
  background-color: var(--color-danger);
}

/* =========================================================================
   Brand Button (BlocHost specific)
   ========================================================================= */

.btn-brand {
  color: var(--color-white);
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

.btn-brand:hover {
  color: var(--color-white);
  background-color: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
  transform: translateY(-1px);
}

.btn-brand:focus-visible {
  box-shadow: 0 0 0 3px var(--color-orange-light);
}