/*
 * 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
 *
 * Layout, alignment, and seam treatment (collapsed inner radii, no double
 * border) come from Basecoat's `.button-group` rules. We only add what
 * Basecoat doesn't anticipate: many button-groups in this app contain
 * buttons rendered via Rails' `button_to`, which wraps the button in a
 * <form>. `display: contents` removes the form from the box tree so the
 * button inside becomes the direct flex item, and we mirror Basecoat's
 * border/radius collapse for the button-inside-form positions.
 */

.button-group > form {
  display: contents;
}

.button-group:not([data-orientation=vertical]) > form:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.button-group:not([data-orientation=vertical]) > form:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-group[data-orientation=vertical] > form:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.button-group[data-orientation=vertical] > form:not(:last-child) > .btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}