/**
 * Invertible Utility Class - Theme-Compliant
 *
 * Provides inverse video effect (swaps foreground/background) for interactive states.
 * Apply the "invertible" class to any element to enable inverse video on hover, focus,
 * and selected states.
 *
 * Theme Colors:
 * - Normal: Uses inherited colors (no change)
 * - Hover/Focus/Selected: Swaps --theme-text and --theme-background
 * - Borders: Maintains --theme-ui (does not invert)
 *
 * Usage:
 *   <button class="invertible">Hover me</button>
 *   <div class="invertible" data-selected="true">Selected item</div>
 */

.invertible {
  /* Smooth transitions for polish */
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover state - inverse video */
.invertible:hover {
  background-color: var(--theme-text);
  color: var(--theme-background);
}

/* Focus state - inverse video */
.invertible:focus {
  background-color: var(--theme-text);
  color: var(--theme-background);
  outline: none; /* Remove default outline, using inverse video instead */
}

/* Selected state - inverse video */
.invertible[data-selected="true"] {
  background-color: var(--theme-text);
  color: var(--theme-background);
}

/* Combined states: selected + hover, selected + focus */
/* These inherit the inverse video from above, so no additional rules needed */

/*
 * Note on borders:
 * If your element has borders, they will maintain their current color.
 * To ensure borders use theme-ui color, add: border-color: var(--theme-ui);
 *
 * Example:
 *   .my-element {
 *     border: 1px solid var(--theme-ui);
 *   }
 */