/* badges */
.badge {
    --badge-color: var(--color-text);
    --size-icon-badge: var(--size-icon-extrasmall);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-weight: var(--font-semibold);
    line-height: 1.5;
    color: var(--badge-color);
}

/* sizes */
.badge_small {
    --size-icon-badge: 0.83rem;

    font-size: 0.875rem;
}

/* colors */
.badge_pink {
    --badge-color: var(--color-pink);
}
.badge_purple {
    --badge-color: var(--color-purple);
}
.badge_blue {
    --badge-color: var(--color-primary);
}
.badge_mint {
    --badge-color: var(--color-mint);
}

/**/
.badge svg {
    min-width: var(--size-icon-badge);
    width: var(--size-icon-badge);
    min-height: var(--size-icon-badge);
    height: var(--size-icon-badge);
}


/* tag */
.tag {
    --tag-border: transparent;
    --tag-bg: transparent;
    --tag-color: var(--color-text);
    
    background-color: var(--tag-bg);
    color: var(--tag-color);
    padding: 0.125rem var(--offset-small);
    min-height: 2.5rem;
    border-radius: var(--radius-extrasmall);
    border: 0.0625rem solid var(--tag-border);
    font-weight: var(--font-semibold);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* colors */
.tag_outlined {
    --tag-border: var(--color-white-12);
}



/* badge-price */
.badge-price {
    padding: var(--offset-small) var(--offset-main);
    background-color: var(--color-bg);
    color: var(--color-text-extralight);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: var(--font-semibold);
    border-radius: var(--radius-semismall);
    overflow: hidden;
}
.badge-price__title {
    font-size: 1rem;
    line-height: 1.4;
}
.badge-price__price {
    font-size: 1.25rem;
    line-height: 1.3;
}


/* sticker */
.sticker {
    --sticker-bg: var(--color-bright-blue-10);
    --sticker-color: var(--color-primary);
    --sticker-padding: 1rem;
    --size-sticker: 2rem;
    --size-svg: var(--size-icon);

    min-height: var(--size-sticker);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--offset-extrasmall);
    background-color: var(--sticker-bg);
    color: var(--sticker-color);
    border-radius: var(--size-sticker);
    padding: 0.125rem var(--sticker-padding);
    white-space: nowrap;
    position: relative;

    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);

    font-size: 0.875rem;
    font-weight: var(--font-regular);
    line-height: 1;
    text-align: center;
}
.sticker svg {
    min-width: var(--size-svg);
    width: var(--size-svg);
    min-height: var(--size-svg);
    height: var(--size-svg);
}
.sticker_small {
    --sticker-padding: 0.5rem;
    --size-sticker: 1.625rem;
    --size-svg: var(--size-icon-semimedium);

    padding: 0 var(--sticker-padding);
    font-size: 0.75rem;
}

/**/
.sticker_light {
    --sticker-bg: var(--color-white-10);
    --sticker-color: var(--color-text-extralight);

}

@media screen and (min-width: 1024px) {
    .sticker:hover {
        --sticker-bg: var(--color-bright-blue-20);
    }
    .sticker_light:hover {
        --sticker-bg: var(--color-white-20);
    }
}
@media screen and (max-width: 1279px) {
    .sticker {
        --sticker-padding: 0.5rem;
        --size-sticker: 1.625rem;
        --size-svg: var(--size-icon-semimedium);

        padding: 0 var(--sticker-padding);
        font-size: 0.75rem;
    }
}

.sticker[disabled] {
    opacity: 0.2;
    pointer-events: none;
}