body::after {
  content:attr(data-fps);
  z-index: 1000;
  position: fixed;
  font-size: .5em;
  inset-inline-start: 50%;
  inset-block-end: 1ex;
}

.material-icons {
  vertical-align: text-bottom;
  transition: all .15s;
}

.button,
button {
  border: none;
  background-color: rgb(0 0 0 / .5);
  color: inherit;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 1em;
  line-height: inherit;
  padding-inline: 2ex;
  cursor: pointer;
  color: rgb(255 255 255/ .5);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s;
  &:hover,&:focus {
    color: white;
  }
  &:active {
    color: rgb(234, 175, 26);
  }
}

@keyframes movinggrid {
  to {
    background-position: 4px 4px;
  }
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 5rem;
  padding: 0 0 3vh;
  margin: 0 auto 1px;

  max-width: 80ch;
  width: 100%;
  justify-content: center;
  border: none;
  background-image: radial-gradient( #0009 0px, #000000ed 3px);
  background-size: 4px 4px;
  animation: movinggrid .5s linear forwards infinite;
  &:last-of-type {
    padding: 0;
  }
  
  &:hover, &:focus-visible {
    & header > .material-icons { 
      scale: 1.5;
      transition-duration: .5s;
    }
  }
  
  & header, & footer {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    line-height: 2;
    padding-inline: 1ex;
    color: #fffc;

    & > .material-icons {
      margin-inline-end: .5rem;
    }
    font-weight: bolder;
    font-size: 1.2em;
  }

  & footer {
    display: flex;
    justify-content: end;
    padding: 0;

  }

  & label {
    display: flex;
    align-items: center;
    gap: 1ex;
    flex-flow: column-reverse;
    
    & > * {
      cursor: pointer;
    }
    
    & > span {
      display: flex;
      flex-flow: column;
      align-items: center;
      color: rgb(255 255 255 / .5);
    }
    
    & .material-icons {
      font-size: 4rem;
      scale: .75;
    }

    & input {
      font-family: inherit;
      font-size: 1.1em;
      line-height: 2rem;

      background-color: transparent;
      border-style: none none dotted;
      border-color: #fff3;
      color: white;
      opacity: .5;
      outline: none;

      &:focus {
        opacity: 1;
        color: var(--gelbe);
      }

      &[type="number"] {
        width: 4rem;
      }
      &[type=range] {
        width: 5rem;
        height: 5rem;
        rotate: -90deg;
      }
    }
    
    & input[type="radio"],
    & input[type="checkbox"] {
      opacity: 0.01;
      height: 0px;
      & ~ * {
        opacity: .5;
        transition: all .2s cubic-bezier(0.075, 0.82, 0.165, 1);
      }
      & ~ img {
        width: 10rem;
        margin: 0 auto;
      }

      &:checked {
        & ~ * {
          color: white;
          opacity: 1;
        }

        & ~ img,
        & ~ .material-icons  {
        
        }
      }
    }

    & input[disabled] ~ * {
      opacity: .25 !important;
      cursor: default;
    }

    &:hover, &:focus {
      & input:not(:checked):not([disabled]) {
        & ~ * {
          opacity: .75;
        }
        & ~ img {
          
        }
      }
    }
  }

  &.car {
    & label {
      position: relative;
      & input {
        ~ img {
          opacity: 1;
          object-position: -100px 0;
          transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
          mask: linear-gradient(to right, transparent 15%, white);
          rotate: 90deg;
          filter: drop-shadow( 5px -5px 5px black) blur(5px);
        }
        &:checked ~ img {
          object-position: -10px 0 !important;
          transition-duration: 1s;
          mask: linear-gradient(to right, transparent 3%, white 90%);
          filter: drop-shadow( 5px -5px 5px black) blur(0px) !important;

        }
      }
      &:focus, &:hover {
        input ~ img {
          object-position: -50px 0;
          filter: drop-shadow( 5px -5px 5px black) blur(2px);
          
      }
      
      &::after {
        content: '';
        position: absolute;
        pointer-events: none;
        inset: 0;
      }

    }
  }
  &.track {
    & label img {
      filter: invert(1)
    }
  }
}
  
}

.hud {
  position: absolute;
  inset: 0;
  line-height: 2;
  color: #fffc;
  pointer-events: none;
  
  & ul {
    list-style: none;
    display: flex;
    flex-flow: column;
    align-items: start;
    margin: 0;
    & li {
      width: 100%;
    }
  }

  & > * {    
    display: flex;
    flex-flow: column;
    width: 22ch;
    position: absolute;
    display: inline-flex;
    padding-inline: 0;
    transition: opacity .25s;

    &:empty {opacity: 0;}

    /* lekker duidelijke selectors, vriend */
    & > * {
      background: rgb(0 0 0 / 0.5);
      margin-block-end: 1px;
      padding-inline: 1ex;
      transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1), color .25s .25s linear;
      
      &:empty {
        translate: calc(100% - 2rem) 0;
        color: transparent;
        &:before {
          opacity: .25!important;
        }
      }
    }

    &.session {
      top: 1ex;
      left: 1ex;
      text-align: center;

      .status {
        &[data-status*='yellow flag'] {
          background-color: goldenrod;
          color: black;
          transition-delay: .5s;
        }
        &[data-status*='red flag'] {
          background-color: var(--rode);
          color: black;
          transition-delay: .5s;
        }
      }
    }

    &.timing {
      top: 1ex;
      right: 1ex;
      text-align: end;
      
      li {
        display: flex;
        justify-content: space-between;
      
        &.thislap::before {
            content: 'lap ' attr(data-lap);
          }

        &.bestlap::before{ 
          content: 'best';
        }

        &.lastlap::before{ 
          content: 'last'
        }
        &:empty::before {
          display: none;
        }
        &.fastest {
          background-color: purple;
        }
      }
    }

    &.racecontrol {
      width: 45ch;
      inset-inline: 50%;
      top: 1ex;
      translate: -50% 0;

      > :empty {
        translate: 0 calc(-100% - 2rem);
      }
      
      & .notice {
        display: flex;

        &:before {
          font-family: 'Material icons';
          content: '\ef49';
          vertical-align: text-bottom;
          margin-inline-end: 1ex;
          color: white;
          opacity: 1;
        }

      }
    }

    &.team {
      right: 1ex;
      top: 50%;
      translate: 0 -50%;
      & .radio{ 
        display: flex;

        &:before {
          font-family: 'Material icons';
          content: '\f0e2';
          vertical-align: text-bottom;
          margin-inline-end: 1ex;
          color: white;
          opacity: 1;
        }
      }
    }

    &.car {
      right: 1ex;
      bottom: 1ex;
    }

    &.help {
      bottom: 1ex;
      left: 1ex;
    }
    & .competitors li {
      text-align: start;
      position: relative;
      
      &.ferrari {--text-color: rgb(255, 17, 0); }
      &.lamborghini {--text-color: rgb(234, 175, 26); }
      &.porsche {--text-color: white; }

      &:before {
        content: attr(data-carnumber);
        font-weight: bold;
        margin-inline-end: 1ex;
        background-color: var(--bg-color);
        color: var(--text-color);
      }


      &:after {
        content: attr(data-shortname);
        text-transform: uppercase;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
}