/*
 * look (site/js/chunks/look.js): five keys of the keyboard on a plate in the theme's ground colour. No controls of
 * its own: the whole keycap is the control (a button over the face), and each tap is the next theme and backlight.
 */

.look {
  --look-pad: 6px;      /* the plate's ground round the keys */
  flex: 1 1 0;
  min-width: 0;
  min-height: 84px;
  margin-inline: var(--cap-pad, 14px);
  display: grid;
  place-items: center;
}

/* The keyboard's own ground, cut into the key's face: --kb-bg is the theme's, written here by the script. */
.look__plate {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: var(--look-pad);
  border-radius: 12px;
  background: var(--kb-bg, #0A0B0C);
  box-shadow: inset 0 0 0 1px var(--cap-line, rgba(232, 237, 237, .1));
  transition: background-color .18s;
}

.look__keys { min-width: 0; }

/* The whole face is the control. Its ring is drawn only when a keyboard has the focus on it. */
.look__next {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--s-2, 8px);
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.look__next:focus-visible {
  outline: 2px solid var(--accent, #51FCFB);
  outline-offset: -4px;
}

.keycap:has(.look__next) { cursor: pointer; }

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

@media (forced-colors: active) {
  .look__plate { border: 1px solid CanvasText; }
}