/* =========================================================
   GlobeWarn — closeable.css

   The close sits in the top corner of whatever it was added to, on the side
   the reading direction ends, so it lands where a thumb already is and where
   a reader already looks.
   ========================================================= */

.gw-has-close { position: fixed; }        /* they already are; stated for clarity */

.gw-closeable {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 2;

  width: 1.9rem;
  height: 1.9rem;
  padding: 0;

  font: inherit;
  font-size: 1.1rem;
  line-height: 1;

  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink-faint, #6b7683);
  cursor: pointer;
}

.gw-closeable:hover {
  border-color: var(--line, #c9d2dc);
  color: var(--ink, inherit);
}

.gw-closeable:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 1px;
}

/* Room for it, so it never sits on top of the first thing in the panel. */
.gw-has-close > *:first-child { padding-inline-end: 2.2rem; }

/* On a pointer device the shortcut and the click-away are enough for most
   people, so the close waits until it is wanted — but it is always there
   for a keyboard, and always visible on touch. */
@media (hover: hover) and (pointer: fine) {
  .gw-closeable { opacity: 0.55; transition: opacity 0.12s ease; }
  .gw-has-close:hover .gw-closeable,
  .gw-closeable:focus-visible { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gw-closeable { transition: none; }
}