.checkbox-card__col {
    --background: #fff;
    --background-checkbox: #{$primary};
    --background-image: #fff, rgba(0, 107, 175, 0.2);
    --blend-mode: overlay;
    --transition: 0.2s;
    --check-color: #f06000;

    display: flex;
    user-select: none;
    /*@include vendor-prefix('user-select', 'none');*/

    --card-radius: .375rem;
    /*Элемент лежит*/
    --block-shadow-down: 0 .25rem 1rem rgba(0, 51, 153, .25), 0 .125rem .125rem rgba(0, 51, 153, .25);
    /*Элемент подняли */
    --block-shadow-up: 0 .5rem 1.25rem rgba(0, 51, 153, .25), 0 .25rem .5rem rgba(0, 51, 153, .25);
    /*Элемент выбран*/
    --block-shadow-checked: 0 0 0 3px var(--check-color);
}

.checkbox-card {
    border: 0;
}

.checkbox-card__input {
    position: absolute;
    display: block;
    outline: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
}

.checkbox-card__input:checked ~ .checkbox-card__body .checkbox-card__body-cover-checkbox {
    --check-border: #fff;
    --check-scale: 1;
    --check-opacity: 1;
}

.checkbox-card__input:checked ~ .checkbox-card__body .checkbox-card__body-cover-checkbox_svg {
    --stroke-color: #fff;
    --stroke-dashoffset: 0;
}

.checkbox-card__input:checked ~ .checkbox-card__body .checkbox-card__body-cover::after {
    --opacity-bg: 0;
}

.checkbox-card__input:checked ~ .checkbox-card__body .checkbox-card__body-cover-image {
    --filter-bg: grayscale(0);
}

.checkbox-card__input:disabled ~ .checkbox-card__body {
    cursor: not-allowed;
    opacity: 0.5;
}

.checkbox-card__input:disabled ~ .checkbox-card__body:active {
    --scale: 1;
}

.checkbox-card__body {
    background: var(--background);
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    padding: 0;
    /*Обычная тень невыбранного элемента (состояние 1)*/
    box-shadow: var(--block-shadow-down);
    transition: transform var(--transition), box-shadow var(--transition);
    transform: scale(var(--scale, 1)) translateZ(0);
}

.checkbox-card__body:active {
    --scale: 0.99;
}

.checkbox-card__body:hover {
    transform: translateY(-4px);
}

.checkbox-card__body:hover:active {
    transform: translateY(-4px) scale(0.99) translateZ(0);
}

/*Элемент выбрали (состояние 2)*/
.checkbox-card__input:checked ~ .checkbox-card__body {
    box-shadow: var(--block-shadow-checked), var(--block-shadow-down);
}

/*Элемент выбрали и навели курсор (состояние 3)*/
.checkbox-card__input:checked ~ .checkbox-card__body:hover {
    box-shadow: var(--block-shadow-checked), var(--block-shadow-up);
}

/*Элемент не выбрали и навели курсор (состояние 4)*/
.checkbox-card__input:not(:checked) ~ .checkbox-card__body:hover {
    box-shadow: var(--block-shadow-up);
}

.checkbox-card__body-cover {
    --c-width: 100%;
    --c-height: 100%;
    position: relative;
    overflow: hidden;
}

.checkbox-card__body-cover::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--c-width);
    height: var(--c-height);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    /*background: linear-gradient(to bottom right, var(--background-image));*/
    /*mix-blend-mode: var(--blend-mode);*/
    opacity: var(--opacity-bg, 1);
    transition: opacity var(--transition) linear;
}

.checkbox-card__body-cover-image {
    min-width: 150px;
    width: var(--c-width);
    height: var(--c-height);
    -o-object-fit: cover;
    object-fit: cover;
    /*filter: var(--filter-bg, grayscale(1));*/
}


/* Кружок "Умелые ручки" */
.checkbox-card__body-cover-checkbox {
    background: var(--background-checkbox);
    border: 3px solid var(--check-color);
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    opacity: var(--check-opacity, 0);
    transition: transform var(--transition), opacity calc(var(--transition) * 1.2) linear;
    transform: scale(var(--check-scale, 0));
}

/* Галя, у нас отмена */
.checkbox-card__body-cover-checkbox_svg {
    width: 18px;
    display: inline-block;
    vertical-align: top;
    fill: none;
    margin: 10px 0 0 7px;
    stroke: var(--check-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: var(--stroke-dashoffset, 16px);
    transition: stroke-dashoffset 0.4s ease var(--transition);
}