/*
 * Avelle icon language — Phosphor 2.1.2.
 * Regular is the default UI weight; Fill is reserved for active/selected state.
 */
.avelle-icon {
    display: inline-block;
    flex: 0 0 auto;
    font-size: var(--avelle-icon-size, 1.25rem);
    line-height: 1;
    vertical-align: -0.125em;
}

.avelle-icon::before {
    display: block;
    line-height: 1;
}

.avr-icon > .avelle-icon,
.avr-clean__action > .avelle-icon,
.avr-actions .tp-header-action-btn > .avelle-icon,
.avelle-header__action > .avelle-icon,
.avelle-header__actions .tp-header-action-btn > .avelle-icon {
    --avelle-icon-size: 1.3125rem;
}

.tp-mobile-item-btn > .avelle-icon {
    --avelle-icon-size: 1.375rem;
}

.avelle-account-sidebar__link > .avelle-icon {
    --avelle-icon-size: 1.375rem;
}

.tp-product-category-icon > .avelle-icon {
    --avelle-icon-size: 1.125rem;
}

.avelle-icon--empty-state {
    --avelle-icon-size: 5rem;
    color: var(--avl-muted);
}

.avelle-icon--quantity {
    --avelle-icon-size: 0.75rem;
}

.avelle-catalog-card__actions .avelle-icon {
    --avelle-icon-size: 1.125rem;
}

.avelle-commerce-product-card .cart-info .avelle-icon,
.avelle-catalog-product .cart-info .avelle-icon,
.tp-product-action-btn .avelle-icon,
.tp-product-action-btn-2 .avelle-icon,
.tp-product-action-btn-3 .avelle-icon,
.tp-product-add-cart-btn-large .avelle-icon {
    --avelle-icon-size: 1.25rem;
}

.tp-cart-action-btn .avelle-icon {
    --avelle-icon-size: 0.875rem;
}

.avelle-cart__empty-icon .avelle-icon {
    --avelle-icon-size: 2.625rem;
}

@media (prefers-reduced-motion: no-preference) {
    .avelle-icon {
        transition: color 160ms ease, transform 160ms ease;
    }
}