@import './Attachments/index.scss';
@import './Book/index.scss';
@import './Comment/index.scss';
@import './LessonPlayList/index.scss';

.video-tube {
  &__content {
    margin-left: 15px;
    
    &--display {
      border-bottom: 1px solid $gray8;
      padding-bottom: 30px;
      video{
        border: 1px solid $gray8;
      }
      span{
        color: $green4;
        padding: 15px 0px;
      }
      h1{
        color: white;
        margin-bottom: 20px;
      }
      p{
        color: white;
      }
    }
    &--comments{
      color: white;
      border-bottom: 1px solid $gray8;
      padding-bottom: 30px;
      header{
        padding: 20px 0px;
        h2{
          margin: 0px;
        }
      }
      button{
        background-color: inherit;
        border: none;
        color: $green;
      }
    }
    &--addComment{
      padding: 15px 0px;

      textarea{
        width: 100%;
        border-radius: 12px;
        background-color: $gray8;
        padding: 10px;
        color: white;
        &:focus{
          outline: none;
        }
        &::placeholder{
          color: $gray4;
        }
      }
    }
  }
  &__sidebar {
    &--playlist {
      border: 1px solid $gray8;
      margin-bottom: 30px;
      header {
        width: 100%;
        color: white;
        h2,
        p {
          margin: 0px;
        }
        p {
          margin-top: 5px;
        }
      }
      &___list {
        padding-top: 10px;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          width: 8px;
        }

        /* Track */
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px inherit;
          border-radius: 10px;
        }

        /* Handle */
        &::-webkit-scrollbar-thumb {
          background: $gray;
          border-radius: 10px;
        }

        /* Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
          background: white;
        }
      }
    }
    &--attachments {
      border: 1px solid $gray8;
      margin-bottom: 30px;
      header {
        width: 100%;
        color: white;
        h2,
        p {
          margin: 0px;
        }
        p {
          margin-top: 5px;
        }
      }
      &___list {
        overflow-y: scroll;
        &::-webkit-scrollbar {
          width: 8px;
        }

        /* Track */
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px inherit;
          border-radius: 10px;
        }

        /* Handle */
        &::-webkit-scrollbar-thumb {
          background: $gray10;
          border-radius: 10px;
        }

        /* Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
          background: white;
        }
      }
    }
    &--suggests {
      border: 1px solid $gray8;
      header {
        width: 100%;
        color: white;
        h2{
          margin: 0px;
        }
        span{
          background-color: #00fff74f;
          color: $blue2;
          padding: 5px 8px;
        }
      }
    }
  }
}

@media screen and (min-width: 1441px) {
  .video-tube {
    main {
      max-width: 1350px;
      margin-top: 10px;
    }
    &__content {
      flex: 8;
      &--display {
        span{
          font-size: 16px;
        }
        h1{
          font-size: 24px;
        }
        p{
          font-size: 16px;
        }
      }
      &--comments{
        header{
          h2{
            font-size: 20px;
          }
        }
        button{
          font-size: 14px;
        }
      }
      &--addComment{
        width: 60%;
        textarea{
          font-size: 14px;
          &::placeholder{
            font-size: 14px;
          }
        }
      }
    }
    &__sidebar {
      flex: 4;
      &--playlist {
        max-height: calc(100vh - 140px);
        header {
          padding: 12px;
          background-color: #2c2c2c;
          img {
            transform: translateY(-5px);
          }
          h2 {
            font-size: 16px;
          }
          p {
            font-size: 10px;
          }
        }
      }
      &--attachments {
        max-height: 320px;
        header {
          padding: 14px 12px;
          background-color: rgba(#ebebeb, 0.21);
          h2 {
            font-size: 16px;
          }
          p {
            font-size: 10px;
          }
        }
      }
      &--suggests {
        background-color: #001702;
        header {
          padding: 20px 12px;
          // background-color: #8bd09746;
          h2 {
            font-size: 16px;
          }
          span{
            font-size: 11px;
          }
        }
        &___list{
          padding: 15px 12px;
          // background-color: #08793d58;
        }
      }
    }
  }
}

@media screen and (min-width: 1008px) and (max-width: 1440px) {
  .video-tube {
    main {
      max-width: 1250px;
      margin-top: 10px;
      padding: 0px 10px;
    }
    &__content {
      flex: 8;
      &--display {
        video{
          width: 100%;
        }
        span{
          font-size: calc(100vw / 100);
        }
        h1{
          font-size: calc(100vw / 60);
        }
        p{
          font-size: calc(100vw / 100);
        }
      }
      &--comments{
        header{
          h2{
            font-size: calc(100vw / 80);
          }
        }
        button{
          font-size: calc(100vw / 90);
        }
      }
      &--addComment{
        width: 60%;
        button{
          font-size: calc(100vw / 110);
        }
        textarea{
          font-size: calc(100vw / 90);
          &::placeholder{
            font-size: calc(100vw / 90);
          }
        }
      }
    }
    &__sidebar {
      flex: 4;
      &--playlist {
        max-height: calc(100vh - 140px);
        header {
          padding: 14px 12px;
          background-color: #2c2c2c;
          img {
            transform: translateY(-5px);
          }
          h2 {
            font-size: calc(100vw / 85);
          }
          p {
            font-size: calc(100vw / 120);
          }
        }
      }
      &--attachments {
        max-height: 250px;
        header {
          padding: 14px 12px;
          background-color: rgba(#ebebeb, 0.21);
          h2 {
            font-size: calc(100vw / 85);
          }
          p {
            font-size: calc(100vw / 120);
          }
        }
      }
      &--suggests {
        background-color: #001702;
        header {
          padding: 26px 12px;
          background-color: rgba(#ebebeb, 0.21);
          h2 {
            font-size: calc(100vw / 85);
          }
          span{
            font-size: calc(100vw / 120);
          }
        }
        &___list{
          padding: 15px 12px;
          background-color: #ffffff00;
        }
      }
    }
  }
}

@media screen and (min-width: 641px) and (max-width: 1007px) {
  .video-tube {
    background : black;
    main {
      max-width: 900px;
      margin-top: 10px;
      padding: 0px 10px;
      flex-direction: column;
    }
    &__content {
      flex: 8;
      margin: 0px;
      &--display {
        padding: 0px;
        video{
          width: 100%;
          margin-bottom: 10px;
        }
        span{
          font-size: calc(100vw / 40);
        }
        h1{
          font-size: calc(100vw / 30);
        }
        p{
          font-size: calc(100vw / 40);
        }
      }
      &--comments{
        header{
          h2{
            font-size: calc(100vw / 40);
          }
        }
        button{
          font-size: calc(100vw / 50);
        }
      }
      &--addComment{
        width: 100%;
        button{
          font-size: calc(100vw / 45);
        }
        textarea{
          font-size: calc(100vw / 45);
          &::placeholder{
            font-size: calc(100vw / 45);
          }
        }
      }
    }
    &__sidebar {
      flex: 4;
      &--playlist {
        max-height: 450px;
        header {
          padding: 12px 12px;
          background-color: #2c2c2c;
          img {
            transform: translateY(-5px);
            width : 40px;
          }
          h2 {
            font-size: calc(100vw / 40);
          }
          p {
            font-size: calc(100vw / 55);
          }
        }
      }
      &--attachments {
        max-height: 250px;
        header {
          padding: 14px 12px;
          background-color: #2c2c2c;
          h2 {
            font-size: calc(100vw / 40);
          }
          p {
            font-size: calc(100vw / 55);
          }
        }
      }
      &--suggests {
        header {
          padding: 14px 12px;
          background-color: #8bd09746;
          h2 {
            font-size: calc(100vw / 40);
          }
          span{
            font-size: calc(100vw / 55);
          }
        }
        &___list{
          padding: 15px 12px;
          background-color: #ffffff00;
        }
      }
    }
  }
}

@media screen and (max-width: 640px) {
  .video-tube {
    background : black;
    margin-top: 20px;
    main {
      max-width: 500px;
      margin-top: 0px;
      padding: 0px 10px;
      flex-direction: column;
    }
    &__content {
      flex: 8;
      margin: 0px;
      &--display {
        padding: 0px;
        video{
          width: 100%;
          margin-bottom: 10px;
        }
        span{
          font-size: calc(100vw / 40);
        }
        h1{
          font-size: calc(100vw / 30);
        }
        p{
          font-size: calc(100vw / 40);
        }
      }
      &--comments{
        header{
          h2{
            font-size: calc(100vw / 30);
          }
        }
        button{
          font-size: calc(100vw / 37);
        }
      }
      &--addComment{
        width: 100%;
        button{
          font-size: calc(100vw / 40);
        }
        textarea{
          font-size: calc(100vw / 35);
          &::placeholder{
            font-size: calc(100vw / 35);
          }
        }
      }
    }
    &__sidebar {
      flex: 4;
      &--playlist {
        max-height: calc(60vh);
        header {
          padding: 8px 12px;
          background-color: #2c2c2c;
          img {
            transform: translateY(-5px);
            width : 30px;
          }
          h2 {
            font-size: calc(100vw / 30);
          }
          p {
            font-size: calc(100vw / 45);
          }
        }
      }
      &--attachments {
        max-height: 200px;
        header {
          padding: 14px 12px;
          background-color: #2c2c2c;
          h2 {
            font-size: calc(100vw / 30);
          }
          p {
            font-size: calc(100vw / 45);
          }
        }
      }
      &--suggests {
        header {
          padding: 10px 12px;
          background-color: #8bd09746;
          h2 {
            font-size: calc(100vw / 30);
          }
          span{
            font-size: calc(100vw / 45);
          }
        }
        &___list{
          padding: 15px 12px;
          background-color: #08793d58;
        }
      }
    }
  }
}