$_theme: () !default

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

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

.banner
  display: flex

.banner-image
  width: 100%
  height: auto
  border-radius: 8px
  align-self: flex-start

.channel-data
  background-color: map.get($_theme, "bg-1")
  padding: 24px
  margin-top: 12px
  border-radius: 8px

  .info
    display: flex
    flex-wrap: wrap

    +dimensions.thin
      display: block

    .thumbnail-image
      $size: 120px

      width: $size
      height: $size
      border-radius: 50%
      margin-right: 24px

    .about
      flex: 1
      margin-top: 10px
      color: map.get($_theme, "fg-main")
      font-size: 16px

      .name
        font-size: 30px
        font-weight: normal
        color: map.get($_theme, "fg-bright")
        margin: 0

      .autogenerated
        font-size: 18px
        font-weight: bold
        margin-bottom: 0.5em

      .about-inner
        display: grid
        // margin-left: 1em

    .subscribe-form
      margin-top: 24px

      .subscribe-button
        $padding: 14px

        padding: $padding - 2px $padding $padding
        line-height: 1
        border-radius: 8px
        font-size: 22px
        background-color: map.get($_theme, "power-deep")
        color: map.get($_theme, "power-fg")
        border: none

  .description
    margin-top: 16px
    overflow-wrap: break-word

.channel-tabs
  padding: 0.5em

  .channel-tabs-header
    width: 100%
    display: flex

    .header
      font-size: 26px
      padding: 0em 0.5em
      flex-grow: 1
      color: map.get($_theme, "fg-dim")
      text-decoration: none
      border-bottom: 1px solid map.get($_theme, "edge-grey")

      &:hover,
      &.selected
        color: map.get($_theme, "fg-bright")

      &.selected
        background: map.get($_theme, "bg-5")
        border: 1px solid map.get($_theme, "edge-grey")
        border-bottom: none
        border-radius: 4px 4px 0px 0px

  .channel-tabs-inner
    background: map.get($_theme, "bg-1")
    border: 1px solid map.get($_theme, "edge-grey")
    border-top: none

    .video-sort-header
      padding-top: 1em
      width: 100%
      display: flex

      .video-sort-padding
        flex-grow: 1

      .video-sort-mode
        font-size: 18px
        padding: 0em 0.5em
        text-decoration: none
        color: map.get($_theme, "fg-dim")

        &:hover,
        &.selected
          color: map.get($_theme, "fg-bright")

    .continuation-btn
      $padding: 14px

      padding: $padding - 2px $padding $padding
      line-height: 1
      border-radius: 8px
      font-size: 22px
      background-color: map.get($_theme, "power-deep")
      border: none

      width: max-content
      margin: auto

      a
        text-decoration: none
        color: map.get($_theme, "fg-bright")

    .no-videos
      font-size: 22px
      font-style: italic
      color: map.get($_theme, "fg-dim")
      margin: 0.5em

.channel-video
  @include channel-video

.channel-error
  background-color: map.get($_theme, "bg-1")
  padding: 24px
  margin: 12px 0px 24px
  border-radius: 8px
  border: 1px solid map.get($_theme, "edge-grey")
  font-size: 20px
  color: map.get($_theme, "fg-warning")

.you-should-unsubscribe
  margin-top: 20px
  color: map.get($_theme, "fg-main")

.about-description // class provided by youtube
  pre
    font-size: inherit
    font-family: inherit
    white-space: pre-wrap