/*
 * Button Styles - Basecoat Integration
 *
 * Basecoat provides base button classes (.btn, .btn-primary, .btn-secondary, etc.)
 * We extend these with Limberjack-specific customizations while maintaining
 * the existing visual design and hover effects.
 */

/* Base Button - extends Basecoat .btn-secondary */
.btn {
  /* Basecoat provides the foundation, we add Limberjack customizations */
  /* margin: 0 var(--spacing-unit); */
  padding: 0.5rem 1rem;

  &:hover {
    background-color: color-mix(in oklch, var(--primary-color) 80%, white 20%);
    text-shadow: 0 2px 2px var(--black);
    outline: 2px solid color-mix(in oklch, var(--secondary-color) 80%, black 20%);
    opacity: 1.0;
    color: white;
  }
}

/* Button Variants */

/* Affirm Button - primary action with animated gradient on hover */
.btn-affirm {
  /* Basecoat .btn-primary provides foundation */
  background-color: var(--primary-color);
  color: white;

  &:hover {
    outline: 2px solid var(--primary-color-dark);
    background-image: linear-gradient(-45deg, var(--primary-color), var(--primary-color-light), var(--success-color), var(--secondary-color));
    background-size: 400% 200%;
    animation: ready-gradient 5s ease infinite;
  }
}

/* Danger Button - destructive action with striped pattern on hover */
.btn-danger {
  /* Basecoat .btn-destructive provides foundation */
  background-color: var(--danger-color);
  color: white;

  &:hover {
    background-image: repeating-linear-gradient(45deg,
        var(--danger-color),
        var(--danger-color) 4px,
        var(--danger-color-dark) 4px,
        var(--danger-color-dark) 8px);
    outline: 4px solid var(--danger-color-dark);
    text-shadow: 0 2px 2px var(--black);
  }
}

/* Add Button - success action with subtle opacity */
.btn-add {
  /* Extends Basecoat .btn with success color */
  background-color: var(--success-color);
  color: white;
  opacity: 0.7;

  &:hover {
    background-color: color-mix(in oklch, var(--success-color) 80%, white 20%);
    opacity: 1.0;
  }
}

/* Cancel Button - secondary/cancel action with striped hover */
.btn-cancel {
  /* Basecoat .btn-ghost or .btn-outline as foundation */
  background-color: var(--medium-gray);
  color: white;
  font-weight: 600;

  &:hover {
    background-color: var(--medium-gray);
    background-image: repeating-linear-gradient(-45deg,
        var(--medium-gray),
        var(--medium-gray) 5px,
        color-mix(in oklch, var(--medium-gray) 80%, black 20%) 5px,
        color-mix(in oklch, var(--medium-gray) 80%, black 20%) 10px);
    text-shadow: 0 2px 2px var(--black);
    outline: 2px solid var(--dark-gray);
  }
}

.button_to {
  display: inline-block;
}

/* Button Groups - Mobile First */

/* Mobile: Stack buttons vertically for easy touch access */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.button-group .btn {
  width: 100%;
  min-height: 44px; /* Touch-friendly minimum size */
  padding: 0.75rem 1rem;
  text-align: center;
  margin: 0; /* Remove any default button margins */
}

/* Desktop: Horizontal layout for larger screens */
@media (min-width: 768px) {
  .button-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    width: auto;
  }

  .button-group .btn {
    width: auto;
    min-height: auto;
    padding: 0.5rem 1rem;
    margin: 0; /* Remove any default button margins */
  }
}