@font-face {
  font-family: Noto;
  src: url("fonts/NotoSans-VariableFont_wdth\,wght.ttf");
}

html {
  font-size:calc(min(5px,1vw));
}
@media (max-width:480px) {
  html {
    /* Font-size is 1% of the client area width */
    font-size:1vw;
  }
}

html {
  --bg:#343434;
  --bg_0:#34343400;
  --bg_50:#34343488;
  --bg-transparent: rgba(52,52,52,0);
  --text-color:#ffffff;
  /*--highlight-color:#F3D008;*/
  --highlight-color:orange;

  background-color: black;
  font-family: Noto, sans-serif;
  padding:0;
  margin:0;
}


.client-host-selector {
  /* Assuming font size is 10% of the desired width */
  width:90rem;

  background:white;
  padding:1rem;
  margin-left:auto;
  margin-right:auto;
  margin-top:1rem;
  font-size:3rem;
  img {
    width:35rem;
  }
  .centered {
    text-align:center;
  }
  input {
    font-size:4rem;
  }
  .button {
    display:inline-block;
    margin:1rem;
    border:0.1rem solid #000;
    background:lightblue;
    border-radius: 0.5rem;
    padding:0.5rem;
    cursor:pointer;
    user-select: none;
    transition:all 0.25s ease-in-out;

    &[disabled] {
      cursor:default;
      opacity: 0.5;
      background:coral;
    }
  }
}

.client {
  width:95rem;
  /*max-width:400px;*/
  margin: 0 auto;

  background-color: var(--bg);
  font-size:2rem;
  border-radius:1rem;
  color:var(--text-color);

  .bg-box {
    width:100%;
    aspect-ratio: 1/1.2;
    /*background-image: url(http://localhost:8000/content/videos/Superman.png);*/
    background:var(--bg);
    position:relative;

    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    margin-bottom:-75%;
  }

  .controls {
    background:linear-gradient(to bottom, var(--bg_0) 0%, var(--bg_50) 20%, var(--bg) 100%);
    position:relative;
    z-index: 1;
    padding:2rem;
    display:flex;
    align-items: center;
    flex-direction: column;
  }
  .content-name {
    color:var(--text-color);
    font-size:5rem;
    text-align: center;
    height:27rem;
  }
  .play-pause {
    width:20rem;
    height:20rem;
    background:radial-gradient(white, lightgray);
    &.playing {
      background:radial-gradient(white, green);
    }
    &.paused {
      background:radial-gradient(white, red);
    }
    transition:background 1s ease-in-out;
    border:0.6rem solid white;
    border-radius: 50%;
    display:inline-block;
    display:flex;
    align-items: center;
    img {
      align-self: center;
      width:80%;
      height:80%;
      margin-left:10%;
    }
  }

  .inputs {
    width:100%;
    input[type="range"] { width:100%; }
    .slider {
      margin-top:4rem;
    }
    .label {
      user-select: none;
    }
  }
}

.host {
  width:100%;

  .video-container {
    width: 95vw;
    height: auto;
    aspect-ratio: 16/9;
    max-height:80vh;
    background: #111;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    video {
      width:100%;
      height: 100%;
      object-fit:contain;
      display: block;
    }
  }
  .status {
    color:white;
    font-size:20pt;
  }
  .smallStatus {
    color:white;
    font-size:10pt;
  }
}

/* Remove default styling */
.styled-slider {
  -webkit-appearance: none;
  background: transparent;
  /* Track (the full bar) */
  &::-webkit-slider-runnable-track {
    height: 1rem;
    background: linear-gradient(to right, var(--highlight-color) var(--val, 50%), grey var(--val, 50%));
    border-radius: 1rem;
  }
  &::-moz-range-track {
    height: 1rem;
    background: linear-gradient(to right, var(--highlight-color) var(--val, 50%), grey var(--val, 50%));
    border-radius: 1rem;
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: white;
    border: 0.2rem solid black;
    margin-top: -2rem; /* center over track */
  }
  &::-moz-range-thumb {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: white;
    border: 0.2rem solid black;
  }
  /* Keep orange left, grey right by updating --val */
  & {--val: 50%;}
  &:focus {outline: none;}
}

.videoThumbnails {
  margin-top:2rem;
  padding-top:2rem;
  width:100%;
  text-align: center;

  .videoSource {
    font-size:2.5rem;
    display:inline-block;
    vertical-align: top;
    text-align: center;
    border:0.4rem solid transparent;
    width:33rem;
    margin:4rem;
    &[data-selected="true"] {
      border-color:var(--highlight-color);
    }
    &:not([data-selected="true"]) {
      cursor:pointer;
    }

    .videoTitle {
      display:block;
      height:8rem;
    }

    .thumbnail {
      width:100%;
    }
  }
}