/**
 * @file utility.css
 * @description Atomic functional classes and global behavior modifiers.
 * @context
 *   .fit-content (Responsive width adaptation)
 *   .radius (Standard border-radius. vars: --radius)
 *   [tabindex]:not(-1) (Global focus/cursor behavior)
 */

/*
 * This stylesheet adjusts individual properties across multiple elements
 * to customize them for specific scenarios.
 */

/* Add the .fit-content utility class to ensure elements adjust 
to their content width, even on smaller screens */
.fit-content {
  width: fit-content;
}

@media (max-width: 768px) {
  .fit-content {
    width: auto;
  }
}

/* Add the .radius utility class to apply a standard border-radius */
.radius {
  border-radius: var(--radius, 0.5rem);
}

/* Elements with a non-negative tabindex are focusable and provide visual feedback when focused */
[tabindex]:not([tabindex="-1"]) {
  cursor: pointer;
}

/* role="button" elements are handled separately in buttons.css */
[tabindex]:not([tabindex="-1"]):not([role="button"]):focus {
  outline: 2px solid var(--primary-color-focus);
}