/**
* Agregar tu código CSS para el panel de filtro y la lista de videos
* Descripción: Este código se encargará de agregar los estilos para
* el panel de filtro y la lista de videos cuando se cargue en una página
* que contenga tu shortcode.
* Versión: 1.1
* Autor: Claudio Ruggiero
*/

/* BACKEND Plugin Options */
/* Video additions */
tr.vgwp-video th, tr.vgwp-video td {
    padding: 0 !important;
}
.vgwp-video td {
    display: inline-flex;
    align-items: center;
}
.vgwp-video input[type="text"] {
    margin-left: 1em;
    margin-right: 1em;
}
.vgwp-video input[type="checkbox"] {
    margin-left: 1em;
}


/* FRONTEND Plugin Elements */
/* Estilos para el filtro de videos */
#filter-panel {
	text-align: center;
	padding: 2em;
}

/* Buscador de texto */
input#search-input {
    display: inline-flex;
    margin-right: 1em;
}

/* Estilos para la lista de videos */
#video-list {
  /* Crear un contenedor flex */
  display: flex;
  flex-wrap: wrap;
}

#video-list li {
  /* Establecer el ancho de las columnas */
  flex: 0 0 calc(50% - 10px);
  margin: 5px;
}

#video-list li {
  position: relative;
}

/* Logo YT Hover Thumbnails */
.vgwp-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
}

.vgwp-playhover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#video-list li:hover .vgwp-playhover {
  display: block;
}

.vgwp-play-img {
  width: 30px;
  height: auto;
}

#video-list li.hidden {
  /* Establecer el tamaño a 0 para los elementos ocultos */
  flex: 0 0 0 !important;
}

#video-list li {
  /* Agregar transición a la propiedad opacity */
  transition: opacity 1s;
}

#video-list li.hidden {
  /* Establecer la opacidad a 0 y ocultar el elemento */
  opacity: 0;
  visibility: hidden;
  display: none;
}

/* Cambiar el número de columnas según el ancho de la pantalla */
@media (min-width: 600px) {
  #video-list li {
	flex-basis: calc(33.33% - 10px);
  }
}

@media (min-width: 900px) {
  #video-list li {
	flex-basis: calc(25% - 10px);
  }
}