/* Copyright Ayers Electronics Inc. All rights reserved. */

/* A kids profile is known at a glance by the rainbow around its picture. The ring grows in when the
   switch is turned on, so the change is seen where it is made, and a viewer who has asked for less
   motion is given the ring without the growth.

   The rainbow is an asset (brand/src/make-kids-ring.py), not a gradient drawn here: a browser
   samples a conic-gradient past its own box at the rim, so the far side's colour wraps into the near
   side's outermost row, and anchoring the background to the border box does not clear it. The asset
   read here is the raster rather than the vector beside it: the vector's hue sits exactly on its
   angle when a rasteriser draws it, and a browser drawing its three hundred and sixty wedges at a
   tile's size does not. */
.kids-ring {
  /* The face's own shape, named by the holder: every face the page draws is round, the study's
     circle. */
  --kids-ring-clip: circle(50%);
  --kids-ring-radius: var(--radius-round);
  box-sizing: border-box;
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: padding 220ms ease-out;
}
/* The asset is the whole wheel, not a band: the picture lies over the middle of it, so what shows is
   a band exactly this padding wide at every size the ring is drawn at. */
.kids-ring[data-kids="yes"] {
  padding: 6px;
  background-image: url("../../assets/kids-ring.png");
  border-color: transparent;
  clip-path: var(--kids-ring-clip);
}
/* The picture keeps the card's own ground under it: the faces are drawn with air around them, and
   without a ground the wheel shows through that air and the band reads uneven. */
.kids-ring[data-kids="yes"] > img {
  clip-path: var(--kids-ring-clip);
  background: var(--panel);
  border-radius: var(--kids-ring-radius);
}
@media (prefers-reduced-motion: reduce) {
  .kids-ring {
    transition: none;
  }
}