/*
 * Discount badges, overlaid on the product image.
 *
 * Colours come from two custom properties so variants only need to redefine those:
 *
 *   .tm-badge-accent { --badge-color: var(--color-accent); --badge-fg: var(--color-accent-content); }
 *
 * Fallbacks are declared inside each variant rather than at the point of use. A custom property
 * that resolves to an undefined var() is invalid at computed-value time, and in that case the
 * fallback in `background-color: var(--badge-color, red)` is ignored, leaving no background at
 * all. Putting the fallback in var(--color-accent, ...) keeps the badge visible if the theme
 * token is missing.
 */

/* Positioning contexts for the overlay. */
.product.media,
.product-item-photo,
.product-item .product-image-container {
    position: relative;
}

.tm-badges {
    position: absolute;
    top: var(--tm-badge-inset, 8px);
    left: var(--tm-badge-inset, 8px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.tm-badge {
    --badge-color: #c1272d;
    --badge-fg: #fff;

    display: inline-block;
    padding: 4px 8px;
    border-radius: 2px;
    background-color: var(--badge-color);
    color: var(--badge-fg);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Variants: set the two properties, inherit everything else. */
.tm-badge-accent {
    --badge-color: var(--color-accent, #c1272d);
    --badge-fg: var(--color-accent-content, #fff);
}

.tm-badge-neutral {
    --badge-color: var(--color-neutral, #1a1a1a);
    --badge-fg: var(--color-neutral-content, #fff);
}

.tm-badge-outline {
    --badge-color: transparent;
    --badge-fg: var(--color-accent, #c1272d);

    border: 1px solid currentColor;
}

/* The product page gallery is taller, so the inset is a little larger there. */
.product.media .tm-badges {
    --tm-badge-inset: 16px;
}

@media (max-width: 767px) {
    .tm-badge {
        font-size: 1.1rem;
        padding: 3px 6px;
    }

    .product.media .tm-badges {
        --tm-badge-inset: 8px;
    }
}