.ui-price {
    /* used in the price sale badge icon size */
    --ui-price-font-size-normal: var(--theme-heading-20-font-size);
    --ui-price-font-size-small: var(--theme-paragraph-30-font-size);
    --ui-price-font-size-tiny: var(--theme-paragraph-20-font-size);

    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space);
    align-items: center;
    font: var(--theme-heading-20-medium);
    letter-spacing: var(--theme-heading-20-letter-spacing);
}

.ui-price[t-size="tiny"] {
    font: var(--theme-paragraph-20-semibold);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-price[t-size="small"] {
    font: var(--theme-paragraph-30-semibold);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
}

.ui-price__regular {
    color: var(--theme-fill-20);
    text-decoration: line-through;
}

/* sale variant */
.ui-price[t-variant="sale"] .ui-price__regular + .ui-price__final {
    display: flex;
    gap: 2px;
    align-items: center;
    color: var(--theme-success-text);
}