/*
 * 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;
  }
}

/* Small Button - compact modifier for inline/secondary actions
   (add-to-notes, modal quick actions). Composes with color variants. */
.btn-small {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* 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;
}

/* ── Action links ──────────────────────────────────────────────
   Compact text actions for card and row contexts ("Find a better fit",
   "Remove", "Build"). Quiet by default so they read as affordances, not
   chrome; variants carry intent. Create them with the action_link helper
   (Components::PolicyHelpers) and wrap a row in .action-links. Contexts
   with their own palette override the colors (see day_timeline.css). */

.action-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
}

.action-link {
  color: var(--text-secondary, #6b7280);
  text-decoration: none;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  opacity: 0.85;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.action-link:hover,
.action-link:focus-visible {
  opacity: 1;
  text-decoration: none;
  background-color: oklch(50% 0 0 / 0.12);
}

.action-link--primary {
  font-weight: 600;
  color: var(--success-color, #15803d);
}

.action-link--danger:hover,
.action-link--danger:focus-visible {
  color: white;
  background-color: var(--danger-color, oklch(60% 0.18 25));
}