/* Item badge chips. Edit these variables first. */
:root {
    --item-badge-gap: 0.45rem;
    --item-badge-border-color: var(--id-chip-border-color, var(--border-subtle));
    --item-badge-background: var(--badge-neutral);
    --item-badge-text: var(--id-chip-text, var(--text-strong));
    --item-badge-marker-size: 0.44rem;
    --item-badge-marker-background: var(--text-muted);

    --item-badge-most-viewed-background: var(--badge-primary);
    --item-badge-most-viewed-border-color: color-mix(in srgb, var(--color-info) 36%, transparent);
    --item-badge-most-viewed-text: var(--id-chip-text, var(--text-link));
    --item-badge-most-viewed-marker: var(--color-info);

    --item-badge-most-popular-background: var(--badge-primary);
    --item-badge-most-popular-border-color: color-mix(in srgb, var(--color-info) 36%, transparent);
    --item-badge-most-popular-text: var(--id-chip-text, var(--text-link));
    --item-badge-most-popular-marker: var(--color-info);

    --item-badge-top-seller-background: var(--badge-success);
    --item-badge-top-seller-border-color: color-mix(in srgb, var(--color-success) 36%, transparent);
    --item-badge-top-seller-text: var(--id-chip-text, var(--text-accent));
    --item-badge-top-seller-marker: var(--color-success);

    --item-badge-editor-choice-background: rgba(255, 208, 97, 0.85);;
    --item-badge-editor-choice-border-color: color-mix(in srgb, var(--color-warning) 36%, transparent);
    --item-badge-editor-choice-text: var(--id-chip-text, var(--color-warning));
    --item-badge-editor-choice-marker: var(--color-warning);

    --item-badge-new-background: var(--badge-success);
    --item-badge-new-border-color: color-mix(in srgb, var(--color-success) 36%, transparent);
    --item-badge-new-text: var(--id-chip-text, var(--text-accent));
    --item-badge-new-marker: var(--color-success);

    --item-badge-most-powerful-background: var(--badge-warning);
    --item-badge-most-powerful-border-color: color-mix(in srgb, var(--color-warning) 42%, transparent);
    --item-badge-most-powerful-text: var(--id-chip-text, var(--color-warning));
    --item-badge-most-powerful-marker: var(--color-warning);

    --item-badge-longest-range-background: var(--badge-primary);
    --item-badge-longest-range-border-color: color-mix(in srgb, var(--color-info) 36%, transparent);
    --item-badge-longest-range-text: var(--id-chip-text, var(--text-link));
    --item-badge-longest-range-marker: var(--color-info);

    --item-badge-best-value-background: var(--badge-success);
    --item-badge-best-value-border-color: color-mix(in srgb, var(--color-success) 36%, transparent);
    --item-badge-best-value-text: var(--id-chip-text, var(--text-accent));
    --item-badge-best-value-marker: var(--color-success);

    --item-badge-lightweight-background: var(--badge-neutral);
    --item-badge-lightweight-border-color: var(--border-base);
    --item-badge-lightweight-text: var(--id-chip-text, var(--text-strong));
    --item-badge-lightweight-marker: var(--text-muted);

    --item-badge-ranking-background: rgba(255, 208, 97, 0.85);
    --item-badge-ranking-border-color: color-mix(in srgb, var(--color-warning) 36%, transparent);
    --item-badge-ranking-text: var(--id-chip-text, var(--color-warning));
    --item-badge-ranking-marker: var(--color-warning);
}

.item-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--item-badge-gap);
    border-color: var(--item-badge-border-color);
    background: var(--item-badge-background);
    color: var(--item-badge-text);
}

.item-badge-chip__marker {
    width: var(--item-badge-marker-size);
    height: var(--item-badge-marker-size);
    border-radius: 999px;
    background: var(--item-badge-marker-background);
    flex: 0 0 auto;
}

.item-badge-chip__label {
    min-width: 0;
    color: inherit;
    overflow-wrap: anywhere;
}

.item-detail .id-primary-figure--hero {
    position: relative;
}

.item-badge-float-list {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-xs);
    max-width: min(22rem, calc(100% - (var(--space-md) * 2)));
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.item-badge-float-list li {
    display: flex;
    min-width: 0;
}

.item-badge-chip--floating {
    --item-badge-background: transparent;
    padding: 0.35rem 0.72rem;
    border: 1px solid var(--item-badge-border-color);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(12, 18, 24, 0.16);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.item-badge-chip[data-badge-type="mostViewed"] {
    --item-badge-background: var(--item-badge-most-viewed-background);
    --item-badge-border-color: var(--item-badge-most-viewed-border-color);
    --item-badge-text: var(--item-badge-most-viewed-text);
    --item-badge-marker-background: var(--item-badge-most-viewed-marker);
}

.item-badge-chip[data-badge-type="mostPopular"] {
    --item-badge-background: var(--item-badge-most-popular-background);
    --item-badge-border-color: var(--item-badge-most-popular-border-color);
    --item-badge-text: var(--item-badge-most-popular-text);
    --item-badge-marker-background: var(--item-badge-most-popular-marker);
}

.item-badge-chip[data-badge-type="topSeller"] {
    --item-badge-background: var(--item-badge-top-seller-background);
    --item-badge-border-color: var(--item-badge-top-seller-border-color);
    --item-badge-text: var(--item-badge-top-seller-text);
    --item-badge-marker-background: var(--item-badge-top-seller-marker);
}

.item-badge-chip[data-badge-type="editorChoice"] {
    --item-badge-background: var(--item-badge-editor-choice-background);
    --item-badge-border-color: var(--item-badge-editor-choice-border-color);
    --item-badge-text: var(--item-badge-editor-choice-text);
    --item-badge-marker-background: var(--item-badge-editor-choice-marker);
}

.item-badge-chip[data-badge-type="new"] {
    --item-badge-background: var(--item-badge-new-background);
    --item-badge-border-color: var(--item-badge-new-border-color);
    --item-badge-text: var(--item-badge-new-text);
    --item-badge-marker-background: var(--item-badge-new-marker);
}

.item-badge-chip[data-badge-type="mostPowerful"] {
    --item-badge-background: var(--item-badge-most-powerful-background);
    --item-badge-border-color: var(--item-badge-most-powerful-border-color);
    --item-badge-text: var(--item-badge-most-powerful-text);
    --item-badge-marker-background: var(--item-badge-most-powerful-marker);
}

.item-badge-chip[data-badge-type="longestRange"] {
    --item-badge-background: var(--item-badge-longest-range-background);
    --item-badge-border-color: var(--item-badge-longest-range-border-color);
    --item-badge-text: var(--item-badge-longest-range-text);
    --item-badge-marker-background: var(--item-badge-longest-range-marker);
}

.item-badge-chip[data-badge-type="bestValue"] {
    --item-badge-background: var(--item-badge-best-value-background);
    --item-badge-border-color: var(--item-badge-best-value-border-color);
    --item-badge-text: var(--item-badge-best-value-text);
    --item-badge-marker-background: var(--item-badge-best-value-marker);
}

.item-badge-chip[data-badge-type="lightweight"] {
    --item-badge-background: var(--item-badge-lightweight-background);
    --item-badge-border-color: var(--item-badge-lightweight-border-color);
    --item-badge-text: var(--item-badge-lightweight-text);
    --item-badge-marker-background: var(--item-badge-lightweight-marker);
}

.item-badge-chip[data-badge-type="top10"],
.item-badge-chip[data-badge-type="top20"],
.item-badge-chip[data-badge-type="top30"],
.item-badge-chip[data-badge-type="top50"] {
    --item-badge-background: rgba(255, 208, 97, 0.93);
    --item-badge-border-color: var(--item-badge-ranking-border-color);
    --item-badge-text: var(--item-badge-ranking-text);
    --item-badge-marker-background: var(--item-badge-ranking-marker);
}

@media (max-width: 575.98px) {
    .item-badge-float-list {
        top: var(--space-sm);
        right: var(--space-sm);
        max-width: calc(100% - (var(--space-sm) * 2));
    }

    .item-badge-chip--floating {
        padding: 0.42rem 0.62rem;
        font-size: 0.76rem;
    }
}