/**
 * @file
 * Replacement for core's hidden.module.css.
 *
 * Provides .visually-hidden and .invisible utilities needed by Drupal and
 * contrib modules (e.g. Canvas). Does NOT define .hidden because that is
 * handled by Tailwind CSS with responsive modifier support.
 *
 * @see lug.info.yml libraries-override
 */

/**
 * Alpine.js x-cloak: hide elements until Alpine initializes.
 */
[x-cloak] {
  display: none !important;
}

/**
 * Hide elements visually, but keep them available for screen readers.
 */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  word-wrap: normal;
}

/**
 * The .focusable class extends the .visually-hidden class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus-within {
  position: static;
  overflow: visible;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  white-space: normal;
}

/**
 * Hide visually and from screen readers, but maintain layout.
 */
.invisible {
  visibility: hidden;
}