/* ==========================================================================
   Component: screen layout, a screenshot that explains each area (.vt-screen-layout)
   Each area of the image is a button. Hovering, focusing or tapping it dims
   the rest of the screenshot and shows a tooltip explaining the area.
   Markup is produced by the `screen_layout(...)` macro in main.py, but can
   also be written by hand. Behaviour lives in docs/js/screen_layout.js.
   Each .vt-screen-layout__area carries its area as unitless percentages of the image:
   --x / --y (left / top edge) and --w / --h (width / height).
   ========================================================================== */
.vt-screen-layout {
  --vt-blue: #0d73b2;
  margin: 1rem 0 1.5rem;
}

.vt-screen-layout__frame {
  position: relative;
  line-height: 0;                 /* removes inline gap under the image */
  border-radius: 6px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .15);
}

.vt-screen-layout__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: filter .2s ease;
}

.vt-screen-layout__hint {
  margin: .6rem 0 0;
  text-align: center;
  font-size: .7rem;
  color: var(--md-default-fg-color--light);
}

/* -- areas ---------------------------------------------------------------- */
.vt-screen-layout__area {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  margin: 0;
  padding: 0;
  border: 2px dashed transparent;
  border-radius: 6px;
  background-color: transparent;
  /* when active, paints its own crop of the screenshot at full brightness
     over the dimmed image (the url comes from screen_layout.js as --vt-src) */
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-size: calc(100% * 100 / var(--w)) calc(100% * 100 / var(--h));
  background-position:
    calc(var(--x) / (100 - var(--w)) * 100%)
    calc(var(--y) / (100 - var(--h)) * 100%);
  font: inherit;
  line-height: normal;
  color: inherit;
  cursor: help;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* show every area once the reader reaches for the image, and always on
   touch screens, where there is no hover to discover them */
.vt-screen-layout__frame:hover .vt-screen-layout__area,
.vt-screen-layout__frame:focus-within .vt-screen-layout__area,
.vt-screen-layout__frame.has-active .vt-screen-layout__area {
  border-color: rgba(13, 115, 178, .75);
  background-color: rgba(13, 115, 178, .08);
}
@media (hover: none) {
  .vt-screen-layout__area {
    border-color: rgba(13, 115, 178, .75);
    background-color: rgba(13, 115, 178, .08);
  }
}

/* spotlight: dim the screenshot, keep the active area at full brightness */
.vt-screen-layout--lit .vt-screen-layout__frame.has-active .vt-screen-layout__img {
  filter: brightness(.45) saturate(.7);
}
.vt-screen-layout--lit .vt-screen-layout__frame.has-active .vt-screen-layout__area {
  border-color: rgba(255, 255, 255, .45);
  background-color: transparent;
}
.vt-screen-layout--lit .vt-screen-layout__area.is-active {
  background-image: var(--vt-src);
}

/* the active area; without JS, :hover and :focus-visible stand in for it */
.vt-screen-layout .vt-screen-layout__frame .vt-screen-layout__area.is-active,
.vt-screen-layout:not(.vt-screen-layout--js) .vt-screen-layout__area:is(:hover, :focus-visible) {
  z-index: 2;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--vt-blue), 0 10px 28px rgba(0, 0, 0, .45);
}
.vt-screen-layout__area:focus-visible {
  outline: 3px solid rgba(13, 115, 178, .55);
  outline-offset: 3px;
}

/* -- tooltip -------------------------------------------------------------- */
.vt-screen-layout__tip {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: min(17rem, 80vw);
  padding: .55rem .75rem;
  border-radius: 8px;
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, rgba(0, 0, 0, .87));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .06);
  font-size: .7rem;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;           /* never blocks the areas underneath */
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--vt-shift, 4px));
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.vt-screen-layout__tip > strong {
  display: block;
  margin-bottom: .15rem;
  color: var(--vt-blue);
  font-size: .75rem;
}
.vt-screen-layout__area.is-active .vt-screen-layout__tip,
.vt-screen-layout:not(.vt-screen-layout--js) .vt-screen-layout__area:is(:hover, :focus-visible) .vt-screen-layout__tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* arrow pointing back at the area */
.vt-screen-layout__tip::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}

/* placement: which side of the area the tooltip opens on */
.vt-screen-layout__area--bottom .vt-screen-layout__tip { top: calc(100% + 10px); --vt-shift: -4px; }
.vt-screen-layout__area--bottom .vt-screen-layout__tip::before { top: -5px; }
.vt-screen-layout__area--top .vt-screen-layout__tip { bottom: calc(100% + 10px); }
.vt-screen-layout__area--top .vt-screen-layout__tip::before { bottom: -5px; }

/* alignment with the area, so the tooltip never leaves the image sideways */
.vt-screen-layout__area--start .vt-screen-layout__tip { left: -2px; }
.vt-screen-layout__area--start .vt-screen-layout__tip::before { left: 16px; }
.vt-screen-layout__area--end .vt-screen-layout__tip { right: -2px; }
.vt-screen-layout__area--end .vt-screen-layout__tip::before { right: 16px; }
.vt-screen-layout__area--center .vt-screen-layout__tip { left: 50%; translate: -50% 0; }
.vt-screen-layout__area--center .vt-screen-layout__tip::before { left: calc(50% - 5px); }

@media (prefers-reduced-motion: reduce) {
  .vt-screen-layout__img,
  .vt-screen-layout__area,
  .vt-screen-layout__tip { transition: none; }
}