@use "colors.sass" as c
@use "video-list-item.sass" 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: c.$fg-main


#watched-videos-display
  position: relative
  left: 10px
  display: block
  z-index: 1
  height: 42px
  margin: 0

.watched-videos-display-container
  position: relative
  display: grid // why does the default not work???
  top: -42px
  background: c.$bg-accent-x
  line-height: 1
  border-radius: 8px
  margin-bottom: -18px

  .watched-videos-display-label
    padding: 12px 0px 12px 32px
    cursor: pointer

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

.video-list-item--watched
  background: c.$bg-darker
  padding: 8px 8px 0px

  .thumbnail .image
    opacity: 0.4