$_theme: () !default

@use "sass:map"
@use "forms" as forms
@use "video-list-item" as *

.subscriptions-page
  padding: 40px 20px 20px
  max-width: 900px
  margin: 0 auto

.subscriptions-video
  @include subscriptions-video

.no-subscriptions
  text-align: center

.channels-details
  margin-bottom: 24px

.channels-list
  display: grid
  grid-gap: 8px

.channel-item
  display: flex
  align-items: center
  text-decoration: none

  .thumbnail
    width: 40px
    height: 40px
    border-radius: 50%
    margin-right: 8px

  .name
    font-size: 22px
    color: map.get($_theme, "fg-main")

  .missing-reason
    font-size: 16px
    color: map.get($_theme, "fg-warning")

@include forms.checkbox-hider("watched-videos-display")

#watched-videos-display:checked ~ .video-list-item--watched
  display: none

.mark-watched
  @include forms.single-button-form