nukeop/nuclear

@import "../../common.scss";

.stream_info {
  position: relative;
  display: block;
  color: $white !important;
  height: auto !important;

  .menu.transition.visible {
    height: max-content;
    background-color: $background2;
    padding: 0;
  }

  .text {
    color: $white;
  }

  .stream_text_info {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-flow: column;
    padding: 0.5rem;
    background: rgba($black, 0.85);
    border-radius: 0.25rem;
  }

  label {
    color: rgba($white, 0.25);
    font-size: 12px;
  }

  .stream_source {
    display: flex;
    justify-content: flex-end;

    .stream_source_name {
      display: flex;
      align-items: center;
      background: $blue;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
    }
  }

  .stream_title {
    min-width: 0 !important;
    margin-bottom: 0.5rem;

    div.item[role="option"] {
      // has to be !important because semantic ui
      // sets !important on the padding
      padding: 0.5em !important;
    }

    div[role="alert"] {
      @include ellipsis;
      position: relative;
      display: block;
      font-weight: bold;
      max-width: 100%;
    }
  }

  .stream_author {
    @include ellipsis;
    color: rgba($white, 0.5);
  }

  .stream_id {
    color: rgba($white, 0.5);
    display: flex;
    align-items: center;

    span {
      @include ellipsis;
      display: inline-block;
      width: calc(100% - 48px);
    }

    button {
      margin-left: 0.5rem;
    }
  }

  .stream_thumbnail {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    overflow: hidden;
    height: 155px;
    width: 205px;
  }

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

  .spacer {
    flex: 1 0 auto;
  }
}

.stream_option {
  display: flex;
  flex-flow: column;
  line-height: 1.5;
  padding: 0;

  .stream_option_title,
  .stream_option_author {
    @include ellipsis;
    color: rgba($white, 0.5);
    z-index: 1;
  }

  .stream_option_thumbnail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .stream_option_thumbnail_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba($black, 0.8);
  }

  &:hover .stream_option_thumbnail_overlay {
    background: rgba($black, 0.6);
  }
}