/* Анимация чекбоксов в фильтрах */

.plus-minus {
    margin: 0px;
    opacity: 0.5;
    --primary: #1E2235;
    --secondary: #FAFBFF;
    --duration: .5s;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    outline: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 240px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    border: 4px solid var(--primary);
    background-size: 300% 300%;
    transition: transform .3s;
    transform: scale(var(--scale, 0.6)) translateZ(0);
    animation: var(--name, unchecked) var(--duration) ease forwards;
    &:before,
    &:after {
        content: '';
        position: absolute;
        width: 16px;
        height: var(--height, 16px);
        left: 6px;
        top: var(--top, 6px);
        background: var(--background, var(--primary));
        animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
    }
    &:before {
        clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);
    }
    &:after {
        --height: 4px;
        --top: 12px;
        --background: var(--secondary);
        --name-icon-b: var(--name-icon-a, checked-icon);
    }
    &:active {
        --scale: .95;
    }
    &:checked {
        --name: checked;
        --name-icon-b: checked-icon;
        --name-icon-a: unchecked-icon;
        opacity: 1;
        --primary: #D14C4F;
    }
}

@keyframes checked-icon {
    from {
        transform: translateZ(12px);
    }
    to {
        transform: translateX(16px) rotateY(90deg) translateZ(12px);
    }
}

@keyframes unchecked-icon {
    from {
        transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
    }
    to {
        transform: translateZ(12px);
    }
}

@keyframes checked {
    from {
        background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
        background-position: 100% 50%;
    }
    to {
        background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
        background-position: 50% 50%;
    }
}

@keyframes unchecked {
    from {
        background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
        background-position: 100% 50%;
    }
    to {
        background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
        background-position: 50% 50%;
    }
}

/* Анимация чекбоксов в фильтрах конец*/

.nav-link:hover {
    transform: scale(1.1);
}

.add-button:hover {
    transform: scale(1.1);
}

.bottom-link:hover {
    transform: scale(1.1);
}

.company-link:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.search-but:hover {
    transform: scale(1.1);
}

.square-image:hover .square-icon{
    transform: scale(1.15);
}

.action-card:hover {
    transform: scale(1.05);
}

.more-actions:hover {
    transform: scale(1.05);
}

.offer:hover {
    transform: translateY(-10px);
}

.agent:hover {
    transform: scale(1.05);
}

.footer-link:hover {
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
}

.rotated {
    transform: rotate(90deg);
}

.offer-item:hover {
    filter: grayscale(0%);
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
}

.offer-inp:checked+.offer-item {
    filter: grayscale(0%);
    -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
}

.action-item:hover {
    transform: scale(1.01);
}

.hp-menu__item:hover {
    transform: scale(1.05);
}