$_theme: () !default

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

.video-page
  display: grid
  grid-auto-flow: row

  @media screen and (min-width: 1000px)
    grid-template-columns: 1fr 400px

  &--recommended-below, &--recommended-hidden
    grid-template-columns: none

  .related-videos
    height: fit-content

  &--recommended-side
    .related-videos
      border-left: 1px solid map.get($_theme, "edge-grey")
      padding-left: 12px
      padding-right: 20px
      background-color: map.get($_theme, "bg-4")
      padding-top: 12px

  &--recommended-below
    .related-videos
      padding: 20px

  &--recommended-hidden
    .related-videos
      display: none

  #below-video-container
    height: fit-content

    input[type=radio]
      display: none

      &[id="radio-comments"]:checked ~ .below-video-radio-container label[for="radio-comments"],
      &[id="radio-recommended"]:checked ~ .below-video-radio-container label[for="radio-recommended"]
        border-bottom: 1px solid map.get($_theme, "edge-grey")

      &[id="radio-recommended"]:checked ~ aside#recommended-videos,
      &[id="radio-comments"]:checked ~ aside#comments
        display: inline

    .below-video-radio-container
      display: flex
      margin-bottom: 20px

      label
        font-size: 32px
        flex-grow: 1
        cursor: pointer

      & ~ aside
        display: none

    #comments
      // padding-left: 2em
      padding-right: 2em

      > h1
        margin-top: 0

.main-video-section
  padding: 20px

  .video-container
    text-align: center
    position: relative

    .video-container-inner
      height: 100%
      display: grid

      .video
        align-self: center
        position: relative
        display: inline-block
        width: 100%
        height: 100%

        max-height: 80vh

        // For custom captions
        &.hasCustomCaptions::cue
          display: none
          font-size: 0px
          background: transparent
          color: transparent

      &.hideCursor
        cursor: none

    &.fullscreen
      .video
        max-height: 100%

    // SponsorBlock
    #sb-skip-prompt
      background-color: map.get($_theme, "bg-4")
      border-radius: 4px
      position: absolute
      right: 1em
      bottom: 4em
      cursor: pointer

      &.hidden
        display: none

      .row
        display: flex
        margin: 8px

        &:not(:last-child)
          border-bottom: 1px solid map.get($_theme, "edge-grey")

        *
          padding: 8px

          &:nth-child(2)
            flex-grow: 1

        .sponsorblock-logo-video
          height: 20px

    // Custom captions
    .caption-box
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: calc(100% - 35px)
      pointer-events: none
      z-index: 1

      .caption-inner
        position: relative
        width: calc(100% - 2em) // 95%
        height: calc(100% - 2em) // 95%
        inset: 0px
        line-height: normal
        top: 1em // 2.5%
        bottom: 1em // 2.5%
        left: 1em // 2.5%
        right: 1em // 2.5%

        .cue-container
          display: flex
          flex-direction: row
          position: absolute
          width: 100%
          height: 100%

          .cue-container-v
            display: flex
            flex-direction: column
            // position: absolute
            flex-grow: 1

            .cue-inner
              unicode-bidi: plaintext
              overflow-wrap: break-word
              text-wrap: balance
              text-align: center
              flex-grow: 1
              color: white
              fill: white

              *
                display: inline-block
                white-space: pre-wrap
                background: rgba(8, 8, 8, 0.75)
                font-size: 39px
                font-family: "YouTube Noto", Roboto, Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif

  .stream-notice
    background: map.get($_theme, "bg-0")
    padding: 4px

  .info
    display: flex
    margin: 8px 4px 16px
    font-size: 17px

    @media screen and (max-width: 499px)
      display: block

    .info-main
      flex: 1

      .video-title-area
        display: flex

        .dearrow-button-video
          min-width: 26px
          height: 26px
          appearance: none
          cursor: pointer
          background-color: transparent
          background-image: url(/static/images/dearrow-logo.svg)
          background-size: contain

          &:not(:checked)
            filter: grayscale(1)

          &:checked ~ .title:not(.alt)
            display: none
          &:not(:checked) ~ .title.alt
            display: none

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

      .author-link
        color: map.get($_theme, "fg-main")
        text-decoration: none

        &:hover, &:active
          color: map.get($_theme, "fg-bright")
          text-decoration: underline

    .info-secondary
      display: flex
      flex-direction: column
      align-items: flex-end
      text-align: right
      margin-top: 6px
      margin-left: 6px

      @media screen and (max-width: 499px)
        align-items: flex-start
        margin-left: 0px

  .continuous
    display: flex
    align-items: center
    justify-content: space-between
    margin: 16px 4px
    padding: 12px
    border-radius: 4px
    background-color: map.get($_theme, "bg-0")

    &__description
      margin-left: 12px

    &__title
      font-size: 20px

    &__script-warning
      font-size: 15px
      color: map.get($_theme, "fg-warning")

    &__buttons
      display: flex
      flex-shrink: 0

  //   - Eir
  .button-container
    display: flex

    .button-container-left,
    .button-container-right
      display: flex
      flex-direction: row
      flex-wrap: wrap
      height: min-content
    .button-container-left
      flex-grow: 1
    .button-container-right
      margin-left: 2em
      flex-direction: column
      .button-container-right-top,
      .button-container-right-bottom
        display: flex
        flex-direction: row
        align-self: flex-end

    #quality-select-noscript-parent
      display: contents

  .description
    position: relative
    font-size: 17px
    line-height: 1.4
    word-break: break-word
    margin: 16px 4px 4px 4px
    background-color: map.get($_theme, "bg-5")
    padding: 12px
    border-radius: 4px

    --regular-background: #{map.get($_theme, "bg-5")}
    --highlight-background: #{map.get($_theme, "bg-1")}
    white-space: pre-line
    *
      white-space: pre-line

.subscribe-form
  display: inline-block

.related-cols
  display: flex
  align-items: center
  margin-bottom: 8px

.continuous-start
  font-size: 18px

.related-header
  margin: 4px 0px 4px 2px
  font-weight: normal
  font-size: 26px
  flex-grow: 1

.related-video
  @include video-list-item
  word-break: break-word

.video-error-page
  padding: 40px 20px 20px
  margin: 0 auto
  max-width: 600px
  line-height: 1.4

.blocked-explanation
  text-align: center
  margin-bottom: 32px

  @media screen and (max-width: 600px)
    display: none

  img
    width: 552px
    height: 96px

  .rows
    display: grid
    grid-template-columns: 22% 20% 20% 20%
    grid-gap: 4%
    justify-content: center

    .row
      margin: 0

      .actor
        margin: 4px 0px 10px

.takedown-footer
  margin-top: 80px

// Chapter highlights

.timestamp--active
  margin: 4px 0px
  display: inline-block

  &::after
    display: block
    position: absolute
    left: 0
    right: 0
    height: -webkit-calc(1.4em + 4px)
    height: calc(1.4em + 4px)
    transform: translateY(-1.4em) translateY(-4px)

    padding-right: 6px
    text-align: right
    content: "⮜"
    line-height: 1.6
    color: #fff

    border: solid black
    border-width: 2px 0px

.fetch-status
  white-space: pre-wrap