$thumbnail-overlay-opacity: 0.85

@mixin is-result
  @at-root
    .result#{&}
      @content

@mixin is-watch-playlist-item
  @at-root
    .watchPlaylistItem#{&}
      @content

@mixin is-recommendation
  @at-root
    .recommendation#{&}
      @content

@mixin is-sidebar-item
  @at-root
    .watchPlaylistItem#{&}, .recommendation#{&}
      @content

.ft-list-item
  .videoThumbnail
    display: flex
    position: relative

    .thumbnailLink
      display: flex

    .thumbnailImage
      height: 130px

      @include is-sidebar-item
        height: 75px

      @include is-recommendation
        width: 163px
        height: auto

    .videoDuration
      position: absolute
      bottom: 4px
      right: 4px
      padding: 3px 4px
      line-height: 1.2
      font-size: 15px
      border-radius: 5px
      margin: 0
      opacity: $thumbnail-overlay-opacity
      color: var(--primary-text-color)
      background-color: var(--card-bg-color)

      &.live
        background-color: #f22
        color: #fff

    .favoritesIcon
      position: absolute
      top: 3px
      right: 3px
      font-size: 17px
      opacity: $thumbnail-overlay-opacity

    .videoCountContainer
      position: absolute
      right: 0
      top: 0
      bottom: 0
      width: 60px
      font-size: 20px

      .background, .inner
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0

      .background
        background-color: var(--bg-color)
        opacity: 0.9

      .inner
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        color: var(--primary-text-color)

  .channelThumbnail
    display: flex
    justify-content: center

    .channelImage
      height: 130px
      border-radius: 50%

  .info
    flex: 1
    position: relative

    .optionsButton
      float: right // ohhhh man, float was finally the right choice for something

    .title
      font-size: 20px
      color: var(--primary-text-color)
      text-decoration: none

      @include is-sidebar-item
        font-size: 15px

    .infoLine
      margin-top: 5px
      font-size: 14px

      @include is-sidebar-item
        font-size: 12px

      &, .channelName
        color: var(--secondary-text-color)

    .description
      font-size: 14px
      color: var(--secondary-text-color)

  &.list
    display: flex
    align-items: flex-start

    .videoThumbnail, .channelThumbnail
      margin-right: 20px

    .channelThumbnail
      width: 231px

    @include is-sidebar-item
      .videoThumbnail
        margin-right: 10px

  &.grid
    display: flex
    flex-direction: column
    min-height: 230px
    padding-bottom: 20px

    .videoThumbnail, .channelThumbnail
      margin-bottom: 12px

      .thumbnailImage
        width: 100%

    .title
      font-size: 18px

    .infoLine
      margin-top: 8px
      font-size: 13px

.videoWatched, .live
  text-transform: uppercase