@import "./import/aside.css";
@import "./import/navbar.css";
@import "./import/general.css";
@import "./import/footer.css";
@import "./import/text-slider.css";
@import "./import/videos-contenedor.css";
@import "./import/cortos-contenedor.css";
@import "./import/vista-previa.css";
@import "./import/animaciones.css";

/* CONTENEDOR DEL VIDEO */

.video-contenedor {
  width: 100%;
  display: flex;
  flex-direction: column;

  .video {
    width: 95%;
    margin: auto;

    video {
      width: 100%;
      border-radius: 10px;
    }
  }
}

.estadisticas-del-video {
  width: 100%;
  gap: 40px;
  display: flex;
  justify-content: center;
  margin: 5px 0px;

  img {
    filter: brightness(0) saturate(100%) invert(39%) sepia(100%) saturate(642%)
      hue-rotate(351deg) brightness(104%) contrast(101%);
  }
}

.info-del-video {
  display: flex;
  width: 95%;
  margin: auto;
  background: #212121;
  padding: 20px 0px;
}

.video-info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15vw;
  height: 100%;

  img {
    border-radius: 100%;
    width: 40px;
  }
}

.video-info-2 {
  width: 60vw;
  .canal-nombre {
    p {
      display: flex;
      gap: 2px;
      font-size: 1.3rem;
      display: flex;
      justify-content: start;
      align-items: center;
    }

    img {
      width: 30px;
    }
  }
}

.video-titulo {
  font-size: 0.9rem;
}

.video-info-3 {
  width: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.botones {
  a {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #ff6200;
    border-radius: 5px;
    padding: 0px 5px;
    gap: 5px;
    transition: 0.5s;

    &:hover {
      background-color: #ce4f00;
    }
    button {
      width: 70%;
      border: none;
      background-color: transparent;

      img {
        filter: invert();
      }
    }
  }
}

.video {
  margin: 0px;
}

/* COMENTARIOS */

.comentarios-videos-contenedor {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-top: 10px;

  .titulo {
    width: 100%;
    background-color: #212121;
    display: flex;
    justify-content: center;
    margin: 20px 0px;
  }

  .comentarios {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    background-color: #212121;

    .titulo {
      margin: 10px 0px;
    }
  }
}

.comentarios-contenedor {
  width: 95%;
  margin: auto;
}

.comentario {
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px;
}

.usuario-perfil {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 5px;
  background-color: #ff6200;
  border-radius: 5px;
  padding: 3px;
  img {
    width: 25px;
    border-radius: 100%;
  }
}

.usuario-comentario {
  width: 100%;
  background-color: #313131;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* VIDEOS RELACIONADOS */

.videos-relacionados_titulo {
  width: 100%;
  text-align: center;
  height: 25px;
  background-color: #212121;
  margin: 20px 0px;
}

.videos-relacionados {
  width: 95%;
  display: flex;
  margin: auto;
  flex-direction: column;
  margin-top: 20px;
  gap: 15px;
}

.titulo-video {
  h4 {
    font-size: 1rem;
  }
}

/* CORTOS */

.cortos-contenedor {
  .cortos:nth-child(4) {
    display: none !important;
  }
}

.video {
  width: 90vw;
}

/* MEDIAQUERYS PARA TABLES */

@media (min-width: 768px) {
  /* CORTOS */
  .cortos {
    width: 21vw !important;
  }

  .cortos:nth-child(4) {
    display: block !important;
  }

  /* VIDEOS Y COMENTARIOS */

  .videos-relacionados {
    gap: 0px;
    .video {
      width: 45vw !important;
    }
  }

  .videos-relacionados {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .video {
  }
}

/* MEDIAQUERYS PARA LAPTOPS */

@media (min-width: 1024px) {
  .cortos-contenedor {
    justify-content: start;
  }

  video {
    width: 95%;
  }

  .video-info {
    width: 10%;
  }

  .video-info-2 {
    width: 70%;
  }

  .video-info-3 {
    width: 20%;
  }

  /* CORTOS */

  .cortos-contenedor {
    .cortos {
      width: 22vw !important;
    }
  }

  /* COMENTARIOS Y VIDEOS RELACIOADOS */

  .videos-relacionados {
    h4 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .comentarios-videos-contenedor {
    flex-direction: row;
    width: 95%;
    gap: 20px;
  }

  .comentarios-contenedor {
    width: 70%;
    margin: 0px;
  }

  .videos-relacionados {
    width: 30%;
    margin: 0px;
    align-content: start;
  }
}

/* MEDIAQUERYS PARA ESCRITORIO */

@media (min-width: 1440px) {
  .cortos-contenedor {
    .cortos {
      width: 11vw !important;
    }
  }

  .cortos {
    width: 17vw !important;
  }

  .video-info {
    width: 7%;
  }

  .video-info-2 {
    width: 78%;
  }

  .video-info-3 {
    width: 15%;
  }
}