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

.pa-snippets {
   margin-top: 1em;
   margin-bottom: 1em;
   line-height: 1em;
}

.pa-snippets>ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   column-gap: 10px;
   row-gap: 10px;
}

.pa-snippets>ul>li {
   text-align: center;
   background-color: #e9e9e9;
   color: #45494e;
   border-radius: 1rem;
   overflow: hidden;
}

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

   .pa-snippets ul li {
      flex-basis: 1;
      flex-grow: 1;
      width: 20%;
      box-sizing: border-box;
   }
}

.wptpas-attribute {
   font-size: 12pt;
   margin: 1rem 0 0.5rem 0;
}

.wptpas-attribute-icon,
.wptpas-attribute-label {
   display: block;
}

.wptpas-attribute-icon {
   font-size: 24pt;
   margin-bottom: 0.1rem;
}

.wptpas-attribute-label {
   color: #6a6a6a;
   font-size: 10pt;
}

.wptpas-term {
   font-size: 12pt;
   font-weight: bold;
   background-color: #0002;
   padding: 0.75rem;
}