/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the theme picker's tiles (js/bird-tiles.js), drawn by Settings > You and the first run's theme face. */
/* The Theme row is one D-pad stop in the column; Left/Right walk the tiles, OK picks. Each tile is a small
   preview of its OWN bird - the bird's mark on the panel, a bar in its colour and its name - so the five read
   apart whatever the page wears. The chosen tile wears its bird's border and a check; the ring is focus. */
.bird-row {
  display: block;
  cursor: default;
}
/* The five in one row; a long name ends in an ellipsis. */
.bird-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 4px;
}
.bird-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 8px 7px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--panel);
  text-align: center;
}
.bird-tile .bird-mark {
  display: block;
  width: 26px;
  height: 26px;
}
.bird-tile .bird-bar {
  display: block;
  align-self: stretch;
  height: 5px;
  margin: 6px 0 5px;
  border-radius: var(--radius-pill);
  background: var(--tile-bird);
}
.bird-tile .bird-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-label);
  line-height: 1.25;
  color: var(--text);
}
/* The check: a disc in the tile's own bird, its tick drawn in that bird's ink. */
.bird-tile .bird-check {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  background: var(--tile-bird);
}
.bird-tile .bird-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--tile-bird-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bird-tile[aria-checked="true"] {
  border-color: var(--tile-bird);
}
.bird-tile[aria-checked="true"] .bird-check {
  display: block;
}
.t-lovebird {
  --tile-bird: var(--bird-lovebird);
  --tile-bird-ink: var(--bird-lovebird-ink);
}
.t-oriole {
  --tile-bird: var(--bird-oriole);
  --tile-bird-ink: var(--bird-oriole-ink);
}
.t-goldfinch {
  --tile-bird: var(--bird-goldfinch);
  --tile-bird-ink: var(--bird-goldfinch-ink);
}
.t-kingfisher {
  --tile-bird: var(--bird-kingfisher);
  --tile-bird-ink: var(--bird-kingfisher-ink);
}
.t-cardinal {
  --tile-bird: var(--bird-cardinal);
  --tile-bird-ink: var(--bird-cardinal-ink);
}