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

/* ANIMACION DE LIKE/COMENTAR Y GUARDAR */

input[type="checkbox"] {
  display: none;
}

.estadisticas-botones-inactivo {
  display: flex;
  filter: invert();
}
.estadisticas-botones-activo {
  display: none;
}

.estadisticas-botones input:checked ~ .estadisticas-botones-inactivo {
  display: none;
}

.estadisticas-botones input:checked ~ .estadisticas-botones-activo {
  display: flex;
  filter: invert();
  animation: likeado 1s ease-in 1;
}

@keyframes likeado {
  0% {
    background-color: transparent;
    border-radius: 90%;
  }

  50% {
    background-color: rgba(0, 0, 0, 0.587);
    border-radius: 90%;
  }
  100% {
    background-color: transparent;
    border-radius: 90%;
  }
}

/* Video del corto */
.corto-video {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 100%;
}

.corto-video video {
  width: 95%;
  height: 78vh;
  height: 90dvh;
  object-fit: cover;
  border-radius: 10px;
}

/* Botones de acciones sobre el video */
.corto-video .estadisticas {
  position: absolute;
  bottom: 30px;
  right: 5px;
  height: 100%;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  gap: 20px;
}

.corto-video .estadisticas button {
  background: transparent;
  border: none;
  cursor: pointer;
}

.corto-video .estadisticas button img {
  filter: invert();
}

/* Likes, comentarios y guardados */
.estadisticas-botones {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Información del corto (pie de video) */
.info-de-este-corto {
  position: absolute;
  bottom: 10px;
  width: 95%;
  display: flex;
  padding: 0 10px;
  gap: 15px;
}

.info-de-este-corto .canal-imagen {
  width: 10%;
  height: 100%;
}

.info-de-este-corto .canal-imagen img {
  width: 40px;
  border-radius: 50%;
}

.info-de-este-corto .corto-descripcion {
  width: 70%;
}

.canal-nombre p img {
  width: 20px;
}

.canal-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover {
    line-clamp: 3;
  }
}

/* Imagen de portada de música */
.corto-musica {
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.corto-musica img {
  width: 40px;
  border-radius: 50%;
  animation: rotate 10s infinite linear;
}

/* Animación de rotación */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Título genérico */
.titulo {
  background-color: #212121;
  text-align: center;
  margin: 20px 0;
}

/* Sección de cortos recomendados */
.cortos-recomendados {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: row;
}

.cortos-recomendados .cortos {
  width: 43dvw;
}

/* Panel de comentarios en escritorio */
.info-comentarios-escritorio {
  display: none;
  width: 50vw;
}

/* Media queries */
@media (min-width: 768px) {
  .corto-video {
    width: 50%;
  }

  .cortos-recomendados {
    justify-content: center;
  }

  .cortos-recomendados .cortos {
    width: 22vw;
  }
}

.cortos-video-contenedor {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.corto-item {
  gap: 20px;
  position: relative;
}

.ver-mas {
  position: absolute;
  bottom: 10px;
  left: 43vw;
  border-radius: 10px;
  animation: scrollear 2s linear infinite alternate;

  a {
    border: none;
    padding: 2px 15px;
  }
}

#uno,
#dos,
#tres {
  scroll-margin-top: 60px;
}

@keyframes scrollear {
  0% {
    background-color: #ff6200;
    transform: scale(1.1);
  }

  100% {
    background-color: #ff6200a0;
    transform: scale(1);
  }
}

@media (min-width: 768px) {
  .ver-mas {
    left: 43vw;
  }
}

@media (min-width: 1024px) {
  /* Estructura principal */
  .seccion-cortos {
    display: flex;
    flex-direction: column;
    width: 95%;
  }

  .cortos-video-contenedor {
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
  }

  /* Item de corto en desktop */
  .corto-item {
    display: flex;
    width: 100%;
  }

  .corto-video {
    width: 40vw;
  }

  .corto-video video {
    height: 90vh;
    object-fit: cover;
    border-radius: 22px;
  }

  /* Comentarios */
  .info-comentarios-escritorio {
    display: flex !important;
    flex-direction: column;
    width: 60%;
    height: 90vh;
    overflow-y: scroll;
  }

  .usuario-comentario {
    padding: 20px;
    border-radius: 10px;
  }

  .info-de-este-corto-escritorio {
    display: flex;
    width: 100%;
    padding: 15px 0px;
  }

  .info-de-este-corto-escritorio_botones {
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      background-color: #ff6200;
      display: flex;
      padding: 2px 10px;
      border: none;
      border-radius: 10px;
      transition: 0.5s;

      &:hover {
        background-color: #d45100;
      }

      img {
        filter: invert();
      }
    }
  }

  .info-de-este-corto {
    display: none;
  }

  .contenedor-info-comentarios {
    width: 50%;
    height: 100px;
  }

  .corto-musica {
    display: none;
  }

  .canal {
    gap: 25px !important;
  }

  .canal-imagen {
    width: 15%;

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

  .corto-descripcion {
    width: 85%;
  }

  .comentarios-contenedor {
    padding: 0 20px;
  }

  .comentarios {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .comentario .usuario-perfil {
    background-color: #ff6200;
    border-radius: 5px;
    padding: 5px;
  }

  .comentario .usuario-perfil img {
    width: 30px;
    border-radius: 50%;
  }

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

  .corto-video .estadisticas {
    justify-content: center;
    align-items: end;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 75px;
  }

  .ver-mas {
    left: 31.5vw;
  }
}

@media (min-width: 1440px) {
  .cortos-video-contenedor {
    width: 80%;
  }

  .seccion-cortos {
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }

  .info-comentarios-escritorio {
    width: 60%;
  }

  .corto-video {
    width: 40%;
  }

  .corto-video video {
    object-fit: cover;
  }

  .corto-descripcion {
    width: 90%;
  }

  .corto-video .estadisticas {
    bottom: 10px;
    width: 100%;
    height: 50px;
  }

  .cortos-recomendados .cortos {
    width: 13vw;
  }

  .ver-mas {
    left: 22.5vw;
  }
}