/* Start:/local/templates/luxecorp/css/chip.min.css?17386920123375*/
.chip {
    --item-pl: 16px;
    --item-pr: 16px;
    --item-height: 36px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--card_bg_active);
    border-radius: var(--theme-button-border-radius);
    height: var(--item-height);
    color: var(--white_text_black);
    padding: 0;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.chip--pill-shape {
    border-radius: 100vw;
    --item-pl: 18px;
    --item-pr: 18px;
    --item-height: 34px;
}

.chip--rectangular-shape {
    --item-pl: 12px;
    --item-pr: 12px;
    --item-height: 36px;
}

.chip--small {
    --item-pl: 12px;
    --item-pr: 12px;
    --item-height: 30px;
}

.chip--large {
    --item-height: 44px;
}

.chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: var(--item-pl);
    padding-right: var(--item-pr);
    white-space: nowrap;
}

.chip:has(.chip__icon) .chip__label {
    padding-right: calc(var(--item-pl) - 4px);
}

.chip.active {
    color: var(--button_color_text);
    cursor: pointer;
}

.chip.active:not(.chip--toggle) {
    cursor: default;
}

.chip--transparent {
    background-color: transparent;
}

.chip:where(a, button) {
    cursor: pointer;
}

.chip:where(a, button):hover {
    background-color: var(--light, rgba(136, 136, 136, .05)) var(--dark, #343434);
}

.chip--white {
    background-color: #fff;
}

@media (any-hover:hover) {
    .chip--white:where(a, button):hover {
        background-color: hsl(var(--theme-base-color-hue), var(--theme-base-color-saturation), calc(var(--theme-base-color-lightness) + var(--theme-lightness-hover-diff)));
        color: #fff
    }
}

.chip--white:where(a, button):focus-visible {
    background-color: hsl(var(--theme-base-color-hue), var(--theme-base-color-saturation), calc(var(--theme-base-color-lightness) + var(--theme-lightness-hover-diff)));
    color: #fff;
}

.chip--white-hover {
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
}

.chip--grey-border {
    border: 1px solid rgba(34, 34, 40, .32);
}

.chip--white-hover:where(a, button):hover,
.chip--white-hover:where(a, button):focus-visible {
    background-color: color-mix(in oklab, #E8E9ED, transparent 32%);
    border-color: transparent;
    color: #fff;
}

.chip--white-blur {
    background-color: rgba(255, 255, 255, .24);
    backdrop-filter: blur(10px);
    color: #fff;
}

.chip--white-blur:where(a, button):hover,
.chip--white-blur:where(a, button):focus-visible {
    background-color: hsl(var(--theme-base-color-hue), var(--theme-base-color-saturation), calc(var(--theme-base-color-lightness) + var(--theme-lightness-hover-diff)));
    border-color: hsl(var(--theme-base-color-hue), var(--theme-base-color-saturation), calc(var(--theme-base-color-lightness) + var(--theme-lightness-hover-diff)));
    color: #fff;
}

.chip__icon {
    padding-right: var(--item-pr);
    height: 18px;
    display: flex;
    align-items: center;
}

.chip.active:hover .chip__icon {
    opacity: .64;
}

.chip--sm {
    --item-pl: 20px;
    --item-pr: 20px;
    --item-height: 34px;
    background-color: #28303f !important;
    color: white !important;
}

.chip--max-width {
    max-width: 400px;
}

@media (max-width:600px) {
    .chip--sm-to-600 {
        --item-pl: 10px;
        --item-pr: 10px;
        --item-height: 30px
    }
}
/* End */
/* /local/templates/luxecorp/css/chip.min.css?17386920123375 */