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

/* A Kids channel wears the console's look (js/kids-channel.js). On the banner's plate: the kids profile's
   rainbow ring round the number and the Kids pill at its foot (kids-ring.css and profile-kids-banner.css;
   this sheet only sets them round a number). The number keeps its own ground, so the rainbow shows as a
   band, and the pill sits outside the ring, so nothing clips it. In the guide: a small dot of the same
   wheel in the cell's left margin, so the number stands where every channel's does. */
.kids-channel {
  position: relative;
  display: inline-flex;
  flex: none;
}
.kids-channel > .kids-ring {
  display: inline-flex;
  --kids-ring-clip: inset(0 round var(--radius-pill));
  --kids-ring-radius: var(--radius-pill);
}
.kids-channel > .kids-ring[data-kids="yes"] {
  padding: 3px;
}

/* The guide's channel cell: the dot centred in the margin left of the number, out of the cell's flow. */
.g-chan > .kids-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--page-margin) / 2 - 5px);
  width: 10px;
  height: 10px;
  margin: -5px 0 0;
  border-radius: var(--radius-round);
  background-image: url("../../assets/kids-ring.png");
  background-size: 100% 100%;
}

/* The banner's plate keeps its own squared shape and ground; the ring takes the plate's corner and the
   Kids pill hangs from its foot, as on a profile's tile. */
#hudLockup .kids-channel > .kids-ring {
  --kids-ring-clip: inset(0 round calc(var(--radius) + 3px));
  --kids-ring-radius: calc(var(--radius) + 3px);
}