:root {
  --height: 300px;
  --width: calc(0.5 * var(--height));
  --size: calc(0.56 * var(--width));
  --half: calc(0.5 * var(--size));
  --font: calc(0.25 * var(--size));
  --margin: calc(0.06 * var(--size));
  --border: calc(0.04 * var(--size));
}

body {
  margin: 0;
  height: 100vh;
  background-color: #222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main {
  width: var(--width);
  height: var(--height);
  position: relative;
}

/* COUNTRY SELECTION */

div#country {
  display: flex;
  justify-content: center;
  margin-bottom: var(--margin);
}

#country label {
  display: inline-block;
  width: var(--half);
  height: var(--half);
  border-radius: var(--half);
  border: var(--border) outset #888;
  box-sizing: border-box;

  background-color: #fff;
}

#country label span {
  display: inline-block;
  width: 100%;
  font-size: var(--font);
  line-height: 1.75em;
  text-align: center;
  color: #ccc;
}

#country label :checked ~ span{
  color: #fff;
}

#country label:has(:checked){
  border-style: inset;
  background-color: #000;
}

/* TRAFFIC LIGHTS */

div#lights {
  margin: 0 auto;
  width: var(--size);
  position: relative;
}

/* Use unlit red light as template for others... */
span.circle {
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: var(--size);
  background-color: red;
  opacity: 0.1;
  pointer-events: none;
}

/* ... then set their color */
label.amber span.circle{
  background-color: #d90;
}

label.green span.circle {
  background-color: green;
}

/* Move radio buttons off-screen */
input {
  position: absolute;
  left: -999px;
}

/* When a light's checkbox is checked, make it bright... */
input:checked ~ .circle {
  opacity: 1;
}
/* ...and hide its .trigger span, so the .trigger for another
 * light will be at the front
 */
input:checked ~ .trigger {
  display: none;
}

/* Make all the .trigger spans fill the div#lights element,
 * so that a click on any light will have an effect.
 */
span.trigger {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

/* When .red light is on, move .ready .trigger to front
 * (UK cycle only)
 */
body:has(.uk :checked) main:has(.red :checked) .ready .trigger {
  z-index: 1;
}

/* When .ready is checked, show both .red and .amber lights.
 * The .ready .trigger is now at the back, so .green .trigger
 * is at the front
 * (UK cycle only)
 */
main:has(.ready :checked) .red .circle,
main:has(.ready :checked) .amber .circle {
  opacity: 1;
}

/* In Fr cycle, .green will always be at front */
/* When .green .trigger is checked, .amber .trigger is at front */

/* When .amber is checked, move .red .trigger to the front */
main:has(.amber :checked) .red .trigger {
  z-index: 1;
}

/* Show the GitHub logo */
a {
  width: 0;
  height: 0;

  img {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 32px;
    height: 32px;
    filter: grayscale(1);
    opacity: 0.25;

    &:hover {
      opacity: 1;
    }
  }
}