.zank-empty,
.zank-terms + select:not(.zank-select),
.zank-term.zank-disabled:after,
.zank-term.zank-disabled:before {
display: none !important;
}
.zank-term.zank-disabled:before {
pointer-events: none;
}
.zank-term.zank-disabled {
opacity: .4;
cursor: default;
}
.zank-terms {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.zank-variations {
display: flex;
flex-direction: column;
gap: 15px;
}
.zank-term {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-align: center;
position: relative;
width: 60px;
height: 25px;
border-radius: 0;
font-size: 12px;
line-height: 1;
}
.zank-term.zank-selected:before {
content: '✓';
min-height: 18px;
min-width: 18px;
border-radius: 100%;
background-color: var(--zank-success);
color: var(--zank-light);
text-align: center;
font-size: 10px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: -12px;
}
.hide-icon .zank-term.zank-selected:before {
content: none;
}
.terms-outline .zank-term {
padding: 3px;
border: 1px solid var(--zank-primary);
}
.zank-type-image .zank-term {
height: 42px;
width: 42px;
}
.zank-type-image .zank-term img {
width: 100%;
height: 100%;
display: block;
}
.zank-type-button:not(.terms-outline) .zank-term {
color: var(--zank-light);
background: var(--zank-primary);
}
.terms-outline .zank-term .type-button {
color: var(--zank-light);
background: var(--zank-primary);
}
.terms-outline .type-button {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.type-color {
height: 100%;
width: 100%;
display: flex;
}
.zank-product.row .zank-variations {
position: relative;
}
.zank-product.row .zank-variations-items .label {
margin-right: 10px;
}
.terms-radius .zank-term,
.terms-radius .type-color,
.terms-radius .type-button {
border-radius: 4px;
}
.zank-term.zank-selected {
border-color: #25d366;
border-width: 2px;
border-style: solid;
}
.zank-product-loop-inner .zank-type-color .zank-term,
.zank-product-loop-inner .zank-type-button.terms-outline .zank-term {
height: auto;
width: auto;
padding: 3px;
}
.zank-product-loop-inner .terms-outline .zank-term .type-button {
color: var(--zank-dark);
background: transparent;
}