/**
 * WP Tutorials : Product attribute snippets (WPTPAS)
 *
 * https://wp-tutorials.tech/refine-wordpress/product-attribute-icons-in-woocommerce/
 */

.pa-snippets {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 5px;
    margin-top: 10px;
    /*justify-content: center;*/
    text-align: center;
    width: 100%;
	line-height: 1.2;
}

[class^="pa-snippet-att-"]{
	display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: space-between;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    color: #555;
}

@media(min-width: 768px) {
   .pa-snippets ul {
      flex-direction: row;
   }

   .pa-snippets ul li {
      flex-basis: 0;
      flex-grow: 1;
   }
}


.wptpas-attribute {
   font-size: 12pt;
   display: flex;
   justify-content: space-around;
   align-items: center;
}
.wptpas-attribute i{
	display: inline-block; /* Asegura que el contenedor se comporte como un elemento en línea */
    width: 30px; /* Establece el ancho del contenedor */
    height: 30px; /* Establece la altura del contenedor */
}
.wptpas-attribute i svg{
	width: 100%; /* Escala el SVG para llenar el contenedor */
    height: 100%;
}
.wptpas-attribute-label {
   display: block;
   margin-bottom: 5px;
}

.wptpas-attribute-icon {
	width: 30px;
    height: 30px;
    margin-bottom: 5px;
    fill: #555;
    object-fit: contain;
   
}

.wptpas-attribute-label {
   color: silver;
   font-size: 11pt;
}

.wptpas-term {
   font-size: 14px;
    line-height: 1.2;
    font-weight: normal;
    margin: 0;
	display: contents;
}
.pa-snippet-att-pa_activacion{background-color: #FFF3E0;}

.pa-snippet-att-pa_nicotina{background-color: #E3F2FD;}

.pa-snippet-att-pa_cantidad-liquido{background-color: #FCE4EC;}

.pa-snippet-att-pa_bateria-recargable{background-color: #E0F7FA;}

.pa-snippet-att-pa_capacidad-bateria{background-color: #EDE7F6;}

.pa-snippet-att-pa_resistencia{background-color: #E1F5FE;}

.pa-snippet-att-pa_puff{background-color: #E8F5E9;}

.pa-snippet-att-pa_tamano{background-color: #F3E5F5;}

.pa-snippet-att-pa_rellenable{background-color: #FFF3E0;}

.pa-snippet-att-pa_activacion{background-color: #F3E5F5;}

.pa-snippet-att-pa_flujo-de-aire{background-color: #FFF3E0;}

.pa-snippet-att-pa_modo{background-color: #e9fde3;}