$thumbnail-overlay-opacity: 0.85
$watched-transition-duration: 0.5s

@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

@mixin low-contrast-when-watched($col)
  color: $col

  @at-root
    .watched &, .watched#{&}
      color: var(--tertiary-text-color)
      transition-duration: $watched-transition-duration

    .watched:hover &, .watched:hover#{&}
      color: $col
      transition-duration: $watched-transition-duration
           
.ft-list-item
  padding: 6px

  &.watched
    background-color: var(--bg-color)
    @include low-contrast-when-watched(var(--primary-text-color))

    .thumbnailImage
      opacity: 0.3
      transition-duration: $watched-transition-duration

    &:hover .thumbnailImage
      opacity: 1
      transition-duration: $watched-transition-duration

  .videoThumbnail
    position: relative

    .thumbnailLink
      display: flex

    .thumbnailImage

      @include is-sidebar-item
        height: 75px

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

    .videoWatched
      position: absolute
      top:0
      padding: 2px
      opacity: $thumbnail-overlay-opacity
      color: var(--primary-text-color)
      background-color: var(--bg-color)
      pointer-events: none

    .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)
      pointer-events: none

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

      @include is-watch-playlist-item
        font-size: 12px

    .externalPlayerIcon
      position: absolute
      bottom: 4px
      left: 4px
      font-size: 17px
      opacity: $thumbnail-overlay-opacity

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

    .watchedProgressBar
      height: 2px
      position: absolute
      bottom: 0px
      background-color: var(--primary-color)
      z-index: 2

    .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

    .externalPlayerButton
      float: right

    .title
      font-size: 20px
      @include low-contrast-when-watched(var(--primary-text-color))
      text-decoration: none
      word-wrap: break-word
      word-break: break-word

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

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

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

      &
        @include low-contrast-when-watched(var(--secondary-text-color))

      .channelName
        @include low-contrast-when-watched(var(--secondary-text-color))

    .description
      font-size: 14px
      max-height: 50px
      overflow-y: hidden
      @include low-contrast-when-watched(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