:root {
  --bootstrap-color-primary: #0d6efd;
  --icon-play-two-url: url('resources/play-two-fill.svg');
  --icon-play-three-url: url('resources/play-three-fill.svg');
}

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: white;
}

/* Container must fill the page */
#container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0%;
}

/* Rows are placed at the bottom */
#container .row {
  width: 100%;
  position: absolute;
  bottom: 0;
}

/* Columns are placed at the bottom and can't take more than 20% of the page in
height */
#container .col {
  width: 100%;
  height: 20%;
  position: absolute;
  bottom: 0;
}

#renderCanvas,
.overlay {
  position: absolute;
}

/* The render canvas must be placed below the overlay (the UI) */
#renderCanvas {
  z-index: 9;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Overlay above the canvas */
.overlay {
  z-index: 10;
}

.controls {
  position: relative;
}

.bi.exo-icon {
  aspect-ratio: 1 / 1; /* stylelint-disable-line property-no-unknown */
}

.exo-icon {
  text-align: center;
  height: 1.5em;
}

/* BLACKMAGIC: aligns custom and non-custom icons on the same line of buttons */
.btn {
  display: inline-grid;
}

.icon-custom {
  background-color: var(--bootstrap-color-primary);
  mask-size: cover;
  -webkit-mask-size: cover;
  background-position: center center;
  display: inline-block;
}

/* Aspect-ratio based on the dimensions of the svg pic (42px * 32px) */
.icon-play-two {
  mask-image: var(--icon-play-two-url);
  -webkit-mask-image: var(--icon-play-two-url);
  aspect-ratio: 21 / 16; /* stylelint-disable-line property-no-unknown */
}

/* Aspect-ratio based on the dimensions of the svg pic (52px * 32px) */
.icon-play-three {
  mask-image: var(--icon-play-three-url);
  -webkit-mask-image: var(--icon-play-three-url);
  aspect-ratio: 13 / 8; /* stylelint-disable-line property-no-unknown */
}

input:checked + label > i.icon-custom {
  background-color: white;
}

input:hover + label > i.icon-custom {
  background-color: white;
}

datalist {
  display: flex;
  justify-content: space-between;
  color: white;
  width: 100%;
  line-height: 1;
}