/*
Theme Name: blaupunkt
Author: Pavlo Dor
Version: 1.0.0
telegram: https://t.me/pavel_dor
*/

:root {
    --main-filter-color: #0F4C86;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label {
    text-align: center;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 5px;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label>a {
    font-size: 28px;
    border-radius: 2px;
    position: relative;
    background-image: linear-gradient(0deg, #ffffff00 25%, var(--main-filter-color) 25%, var(--main-filter-color) 86%, var(--main-filter-color) 75%), linear-gradient(90deg, var(--main-filter-color) 25%, var(--main-filter-color) 25%, var(--main-filter-color) 75%, transparent 75%), linear-gradient(180deg, transparent 25%, var(--main-filter-color) 25%, var(--main-filter-color) 75%, var(--main-filter-color) 75%), linear-gradient(270deg, var(--main-filter-color) 25%, var(--main-filter-color) 25%, var(--main-filter-color) 75%, #ffffff00 75%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    padding: 0.5em;
    line-height: 1;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
    background-repeat: no-repeat;
    color: var(--main-filter-color);

}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label>a::after {
    content: '';
    width: 10px;
    height: 10px;
    background-image: url(img/arrowblaupunk.png);
    background-size: 10px 10px;
    position: absolute;
    right: 0;
    top: 0;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label>a::before {
    content: '';
    width: 10px;
    height: 10px;
    background-image: url(img/arrowblaupunk.png);
    background-size: 10px 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label .term-label {
    display: block;
    font-size: inherit;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover {
    filter: grayscale(var(--value, 100%));
    background: unset;
    box-shadow: unset;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover .term-label,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover .item-count {
    color: unset;
}
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image) {
    background-color: var(--main-filter-color);
    box-shadow: unset;
    color: var(--yith-wcan-labels_style_text_active, #fff);
}