@use "colors.sass" as c
@use "video-list-item.sass" as *
@use "forms.sass" as forms

.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: c.$fg-main

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

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