:root {
  --header-height: 48px;
  --participants-landscape-width: 10rem;
  --participants-portrait-height: 10rem;
  --participant-width: 7rem;
  --participant-height: 8.5rem;
}

@media (max-width: 800px) {
  :root {
    --header-height: 48px;
    --participants-landscape-width: 10rem;
    --participants-portrait-height: 7rem;
    --participant-width: 5rem;
    --participant-height: 6rem;
  }
}

@media (max-height: 800px) {
  :root {
    --header-height: 48px;
    --participants-landscape-width: 7rem;
    --participants-portrait-height: 7rem;
    --participant-width: 5rem;
    --participant-height: 6rem;
  }
}

* {
  box-sizing: border-box;

  padding: 0;
  margin: 0;

  outline: none;
  border: none;

  transition: all 0.2s ease-out;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #333;
  color: #ccc;

  font-family: sans-serif;
  font-size: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

button {
  background: dodgerblue;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.25);
  border-radius: 0.5rem;
}

.destructive {
  background: #b20000;
}

button.destructive:active {
  background: #6a0000;
}

@media (hover: hover) {
  button.destructive:hover {
    background: #6a0000;
  }
}

button:active {
  background: #125699;
}

@media (hover: hover) {
  button:hover {
    background: #125699;
  }
}

button.modal-cta {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 5;
  padding: 1.5rem;
  font-size: 1.5rem;
  width: 50vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);

  background: #555;
  line-height: var(--header-height);
  text-align: center;
  font-size: 0.8rem;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  opacity: 0;

  box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.25);
  padding: 0 0.25rem;
  z-index: 3;
}

#off-banner {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: #ccc;
  box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.25);
  display: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

header button {
  flex: 1;
  background: transparent;
  color: #ccc;
  min-width: 5ch;
  max-width: calc(16px + 20ch);
  border-radius: 0.25rem;
  margin: 2px 4px;
  padding: 2px 0;
  font-size: 24px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 0.8rem;

  box-shadow: none;

  display: flex;
  justify-content: center;
  align-items: center;
}

header button:active {
  background: #444;
  color: #eee;
}

@media (hover: hover) {
  header button:hover {
    background: #444;
    color: #eee;
  }
}

header button .la-icon {
  margin-right: 8px;
  font-size: 24px;
}

@media (max-width: 400px) {
  header button .text {
    display: none;
  }
  header button .la-icon {
    margin: 0;
  }
}

.participant span.la-icon {
  font-size: 16px;
}

#participants {
  position: absolute;
  z-index: 3;
  background: #444;

  text-align: center;
  font-size: 0.8rem;
  color: #aaa;

  display: none;
}

.participant {
  position: relative;

  padding: 0.25rem;
  text-align: center;
  cursor: pointer;
  border: 4px solid transparent;

  width: var(--participant-width);
  height: var(--participant-height);

  min-width: var(--participant-width);
  min-height: var(--participant-height);

  overflow: hidden;

  background: #222;
}

.participant .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .participant:hover {
    border-color: dodgerblue;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  }
}

.participant.focused {
  background: #555;
  color: white;
}

.participant video {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5rem;
  height: 100%;
}

.participant button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0.8;
  color: #ccc;
  background: #444;
  z-index: 999;
  text-transform: uppercase;
  font-size: 0.7rem;
  border-radius: 0.25rem;
  padding: 4px;
}

.participant button:active {
  background: #555;
}

@media (hover: hover) {
  .participant button:hover {
    background: #555;
  }
}

.participant button .la-icon {
  display: block;
}

.participant .no-audio,
.participant .no-video {
  position: absolute;
  bottom: 0;
  width: 50%;
  padding: 0.25rem;
  background: #333;
  color: tomato;
  font-size: 0.6rem;
  z-index: 1;
  opacity: 0.9;
  font-weight: bold;
  text-align: center;
  border: 1px solid #333;
  white-space: nowrap;
}

.participant.focused .no-audio,
.participant.focused .no-video {
  border-color: dodgerblue;
}

.participant .no-audio button,
.participant .no-video button {
  top: 40%;
}

.participant .no-audio {
  left: 0;
}

.participant .no-video {
  left: 50%;
}

#participants .instructor {
  font-weight: bold;
}

#participants-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

#focus {
  position: absolute;
  z-index: 1;
}

#local-participant {
  position: absolute;
  top: calc(var(--header-height) + 2.5rem);
  right: 10px;
  width: var(--participant-width);
  height: var(--participant-width); /* square */
  box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.4);
  border: 1px solid #333;
  display: none;
  z-index: 100;
}

@media (orientation: landscape) {
  #focus {
    top: var(--header-height);
    left: var(--participants-landscape-width);
    width: calc(100% - var(--participants-landscape-width));
    height: calc(100% - var(--header-height));
  }

  body.mostly-empty #focus {
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-height));
  }

  #participants {
    top: var(--header-height);
    left: 0;
    width: var(--participants-landscape-width);
    height: calc(100% - var(--header-height));
    padding-top: 1rem;
  }

  #participants-list {
    flex-direction: column;
    overflow-y: scroll;
  }

  #participants-list > div + div {
    margin-top: 1rem;
  }

  #on-air {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.5rem;
  }
}

@media (orientation: portrait) {
  #focus {
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(
      100% - var(--header-height) - var(--participants-portrait-height)
    );
  }

  body.mostly-empty #focus {
    height: 100%;
  }

  #participants {
    top: calc(100% - var(--participants-portrait-height));
    left: 0;
    width: 100%;
    height: var(--participants-portrait-height);
    box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.4) inset;
  }

  #participants-list {
    flex-direction: row;
    overflow-x: scroll;
  }

  #participants-list > div + div {
    margin-left: 1rem;
  }

  #participants .participant {
    margin: 0.5rem;
    overflow: hidden;
  }

  #on-air {
    position: absolute;
    bottom: calc(var(--participants-portrait-height) + 2rem);
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (orientation: portrait) and (max-height: 800px) {
  #focus {
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-height));
  }

  #participants {
    top: calc(100% - var(--participants-portrait-height));
    left: 0;
    width: 100%;
    height: var(--participants-portrait-height);
    box-shadow: none;
    background: transparent !important;
  }
}

#status {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #333;
  box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.4);
  padding: 1rem;
  color: #ccc;
  display: none;
  z-index: 99;
  white-space: nowrap;
  text-align: center;
}

#status.error {
  background-color: red;
}

#status.sticky {
}

.vertical-menu {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 1rem;
  background: #333;
  border-radius: 0.25rem;
}

.vertical-menu > * {
  margin: 1rem 0;
}

.vertical-menu button {
  padding: 1rem;
}

@keyframes asking {
  0% {
    background-color: #333;
    border-color: #222;
  }
  33% {
    background-color: deeppink;
    border-color: #222;
    color: #333;
  }
  100% {
    background-color: #333;
    border-color: #222;
  }
}

.participant.asking {
  animation: asking 1.5s ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes pulsate {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#on-air {
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  border: 0.1rem solid white;
  background: #b20000;
  color: white;
  text-align: center;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 0.15rem 0.25rem rgba(0, 0, 0, 0.4);
  z-index: 999;
  animation: pulsate 3s ease-in-out;
  animation-iteration-count: infinite;
}

#start-publishing {
  display: none;
}