/**
 * Override of core/modules/system/css/components/hidden.module.css
 *
 * Scopes .hidden with :not([data-component] *) so it doesn't override
 * Tailwind's responsive utilities (e.g. hidden lg:block) inside React
 * components. Tailwind's .hidden is inside @layer utilities, so un-layered
 * .hidden from core always wins — this scoping prevents that.
 */
.hidden:not([data-component] *) {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus-within {
  position: static !important;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
}

.invisible {
  visibility: hidden;
}