* {
  box-sizing: border-box;
}

html,
body,
#player-info {
  height: 100%;
}

body {
  margin: 0;
  padding: 0.5rem;
  color: var(--foreground);
  font-size: 1rem;
  font-family: sans-serif;
  line-height: 1.25;
}

body,
body:fullscreen,
body::backdrop {
  background: var(--background);
}

:root {
  --remaining-time: 0s;
  --progress: 0%;
  --background: #fff;
  --foreground: #222;
}

.error {
  color: #800;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #222;
    --foreground: #eee;
  }

  a {
    color: #66f;
  }

  a:visited {
    color: #84f;
  }

  a:active {
    color: #f00;
  }

  .error {
    color: #f44;
  }
}

button img {
  width: 2em;
}

.progress {
  width: 100%;
  border: 1px solid var(--foreground);
  position: relative;
  height: 1.25em;
  line-height: 1.25em;
}

.progress .bar {
  background: var(--foreground);
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-mask-image: linear-gradient(to right, #fff 100%, transparent);
  mask-image: linear-gradient(to right, #fff 100%, transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0%;
  mask-size: 0%;
}

.progress .outer-label,
.progress .inner-label {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}

.progress .inner-label {
  color: var(--background);
}

#progress-bar {
  animation: var(--remaining-time) linear forwards progress-bar;
}

@keyframes progress-bar2 {
  from {
    -webkit-mask-size: var(--progress);
    mask-size: var(--progress);
  }

  to {
    -webkit-mask-size: 100%;
    mask-size: 100%;
  }
}

@keyframes progress-bar {
  from {
    -webkit-mask-size: var(--progress);
    mask-size: var(--progress);
  }

  to {
    -webkit-mask-size: 100%;
    mask-size: 100%;
  }
}

#player-info {
  display: grid;
  grid-template:
    "controls stream links" auto
    "info info info" 1fr
    / 1fr auto 1fr;
  gap: 0.5em;
}

#controls {
  grid-area: controls;
  z-index: 1;
}

#stream {
  grid-area: stream;
  max-height: 2em;
  z-index: 1;
}

#links {
  grid-area: links;
  justify-self: end;
  z-index: 1;
  text-align: end;
}

#links a,
#links form {
  display: block;
}

#info-frame {
  justify-self: stretch;
  align-self: stretch;
  grid-area: info;
  margin: -0.5rem;
}

#controls form,
.users form,
.invitations form {
  display: inline;
}

#info-container {
  display: grid;
  grid-template:
    ". timing ." auto
    ". info ." auto
    "cover cover cover" 1fr
    / 1fr auto 1fr;
  height: 100%;
}

#timing {
  grid-area: timing;
  display: grid;
  grid-template:
    "elapsed progress remaining" auto
    / auto 1fr auto;
  gap: 0.5ex;
  min-width: min(30rem, calc(100vw - 1rem));
}

#timing.no-progress {
  grid-template:
    "elapsed" auto
    / auto;
}

#track-info {
  grid-area: info;
}

#track-info th {
  text-align: end;
}

.cover {
  grid-area: cover;

  /* Fixes chrome interpreting 100% height to not refer to the parent element's height */
  overflow: hidden;
}

#cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#elapsed {
  justify-self: end;
}

.no-progress #elapsed {
  justify-self: center;
}

#progress {
  gid-area: progress;
}

#remaining {
  gid-area: remaining;
}

.no-progress #progress,
.no-progress #remaining {
  display: none;
}

form {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 0.5em;
}

@media (max-width: 30rem) {
  #player-info {
    grid-template:
      "controls links" auto
      "stream stream" auto
      "info info" 1fr
      / 1fr 1fr;
  }
}