/* Item zoom */
/* ========= */
/* The magnifier on a tile (gear/items/_zoom_link), opening the picture in the lightbox.
   Placed bottom right of a calendar tile's picture by default; the compact grid and the
   rules section's toggle tiles move it below. */
.item-zoom {
  position: absolute;
  right: 0.1875rem;
  bottom: 0.1875rem;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.375rem;
  height: 1.375rem;

  background-color: rgba(var(--bs-body-bg-rgb), 0.85);
  border-radius: 50%;
  color: var(--bs-emphasis-color);

  font-size: 0.75rem;
  line-height: 1;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    background-color: var(--bs-body-bg);
    color: var(--pg-accent);
  }
}

/* Compact grid: top left, matching the event card's remove button top right - the
   reference overlay already runs along the bottom. */
.compact-itemgrid-thumbnail-container > .item-zoom {
  top: 0.15rem;
  right: auto;
  bottom: auto;
  left: 0.15rem;
  z-index: 3;

  width: 1.1rem;
  height: 1.1rem;

  font-size: 0.625rem;
}

/* Rules section: the tile is a <button>, which can't hold a link, so the link sits beside
   it in a host the same size as the tile, and is placed over the picture's bottom right
   corner. The picture is a square as wide as the tile (100cqw), inside a 2px border. */
.calendar-rule__tile-host {
  position: relative;

  display: grid;
  min-width: 0;

  container-type: inline-size;

  > .item-zoom {
    top: calc(100cqw - 2px - 0.1875rem - 1.375rem);
    right: calc(2px + 0.1875rem);
    bottom: auto;
  }
}