.streams-container {
  #empty-message {
    display: none;
  }

  .streams {
    &:empty {
      display: none;

      + #empty-message {
        display: block;
      }
    }
  }

  .stream {
    .live {
      position: absolute;
      left: $spacing-small;
      top: $spacing-small;
      color: white;
      background-color: #e91916;
      font-weight: bold;
    }

    .viewers {
      position: absolute;
      left: $spacing-small;
      bottom: $spacing-small;
      color: white;
      background-color: rgba(0, 0, 0, 0.7);
    }

    .avatar {
      padding: 1.5rem;
    }
  }

  .twitch-embed-container {
    padding-bottom: 0%;
    transition: padding-bottom 400ms ease-in-out;

    &.open {
      padding-bottom: 150%;

      @media screen and (min-width: 713px) { // magic numbers, Twitch has weird breakpoints
        padding-bottom: 40.6%;
      }
    }
  }
}