/**
 * CBTAPPS Design System - Button Components
 * Version: 1.0.0
 *
 * Comprehensive button component system with multiple variants,
 * sizes, and states for the CBTAPPS platform.
 */

/* ============================================
 * BUTTON BASE STYLES
 * ============================================ */

.cbt-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);

  /* Typography */
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  /* Spacing */
  padding: var(--spacing-3) var(--spacing-5);
  border: 1px solid transparent;

  /* Appearance */
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);

  /* Interactive */
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Focus visible for accessibility */
  &:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
  }

  /* Disabled state */
  &:disabled,
  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

/* ============================================
 * BUTTON VARIANTS
 * ============================================ */

/* Primary Button */
.cbt-btn--primary {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  border-color: var(--color-primary-500);

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

  &:active:not(:disabled) {
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
  }
}

/* Secondary Button */
.cbt-btn--secondary {
  background-color: var(--color-secondary-500);
  color: var(--color-neutral-0);
  border-color: var(--color-secondary-500);

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

  &:active:not(:disabled) {
    background-color: var(--color-secondary-700);
    border-color: var(--color-secondary-700);
  }
}

/* Outline Button */
.cbt-btn--outline {
  background-color: transparent;
  color: var(--color-primary-500);
  border-color: var(--color-border-default);

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

  &:active:not(:disabled) {
    background-color: var(--color-primary-100);
  }
}

/* Ghost Button */
.cbt-btn--ghost {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: transparent;

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

  &:active:not(:disabled) {
    background-color: var(--color-background-tertiary);
  }
}

/* Danger Button */
.cbt-btn--danger {
  background-color: var(--color-error-500);
  color: var(--color-neutral-0);
  border-color: var(--color-error-500);

  &:hover:not(:disabled) {
    background-color: var(--color-error-600);
    border-color: var(--color-error-600);
  }

  &:active:not(:disabled) {
    background-color: var(--color-error-700);
    border-color: var(--color-error-700);
  }
}

/* Success Button */
.cbt-btn--success {
  background-color: var(--color-success-500);
  color: var(--color-neutral-0);
  border-color: var(--color-success-500);

  &:hover:not(:disabled) {
    background-color: var(--color-success-600);
    border-color: var(--color-success-600);
  }

  &:active:not(:disabled) {
    background-color: var(--color-success-700);
    border-color: var(--color-success-700);
  }
}

/* ============================================
 * BUTTON SIZES
 * ============================================ */

.cbt-btn--xs {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  gap: var(--spacing-1);
}

.cbt-btn--sm {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  gap: var(--spacing-1);
}

.cbt-btn--md {
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-base);
  gap: var(--spacing-2);
}

.cbt-btn--lg {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-lg);
  gap: var(--spacing-2);
}

.cbt-btn--xl {
  padding: var(--spacing-5) var(--spacing-8);
  font-size: var(--font-size-xl);
  gap: var(--spacing-3);
}

/* ============================================
 * BUTTON WITH ICONS
 * ============================================ */

.cbt-btn__icon {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;

  /* Icon only button */
  .cbt-btn--icon-only & {
    width: 1.5em;
    height: 1.5em;
  }
}

.cbt-btn--icon-only {
  padding: var(--spacing-3);
  aspect-ratio: 1;
}

/* ============================================
 * BUTTON BLOCK
 * ============================================ */

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

/* ============================================
 * BUTTON LOADING STATE
 * ============================================ */

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

  &::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: cbt-button-spin 0.6s linear infinite;
  }
}

@keyframes cbt-button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
 * BUTTON GROUP
 * ============================================ */

.cbt-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.cbt-btn-group--attached {
  gap: 0;

  .cbt-btn {
    border-radius: 0;

    &:first-child {
      border-top-left-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }

    &:last-child {
      border-top-right-radius: var(--radius-lg);
      border-bottom-right-radius: var(--radius-lg);
    }

    &:not(:first-child) {
      border-left: none;
    }

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

    &:focus-visible {
      z-index: 1;
    }
  }
}

/* ============================================
 * BUTTON ICON VARIANTS
 * ============================================ */

.cbt-btn--icon-start {
  flex-direction: row;
}

.cbt-btn--icon-end {
  flex-direction: row-reverse;
}

/* ============================================
 * ACCESSIBILITY
 * ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .cbt-btn {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .cbt-btn {
    transition: none;
  }

  .cbt-btn--loading::after {
    animation: none;
  }
}