/* SchoolDay v234: the per-game colour controls on the Maths tab. */

/* Folded away by default. Most schools keep the defaults, and seven colour
   pickers per game open at once would bury the Play button that is the point
   of the card. */
.maths-look-v234 {
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid #dbe6ef;
}
.maths-look-v234 > summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  color: #0f3d6b;
}
.maths-look-grid-v234 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .5rem;
  margin: .6rem 0 .5rem;
}
.maths-look-grid-v234 label {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  margin: 0;
  font-size: .74rem;
  color: #5b7185;
}
/* Square swatches, for the same reason the club colour is square: an
   <input type="color"> with no rule is a wide, short bar with a thin strip of
   colour in it, and the colour is the whole point of the control. */
.maths-look-grid-v234 input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100% !important;
  height: 2.4rem !important;
  min-height: 0;
  padding: 2px;
  border: 2px solid rgba(20, 79, 140, .25);
  border-radius: .45rem;
  background: #fff;
  cursor: pointer;
}
.maths-look-grid-v234 input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.maths-look-grid-v234 input[type="color"]::-webkit-color-swatch { border: 0; border-radius: .3rem; }
.maths-look-grid-v234 input[type="color"]::-moz-color-swatch { border: 0; border-radius: .3rem; }
.maths-look-grid-v234 select { width: 100%; }

.maths-look-actions-v234 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.maths-look-actions-v234 > span { font-size: .74rem; }