.myshop .checkbox-wrapper,
.myshop .radio-wrapper {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.myshop .checkbox-wrapper input,
.myshop .radio-wrapper input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 1;
    opacity: 0.001; /*it is need to be selectable by tabbing framework, but also not interfere with custom masks*/
}

.myshop .checkbox-wrapper .checkbox-icon,
.myshop .radio-wrapper .radio-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    fill: var(--checkbox-and-radio-color);
    transition: 0.3s ease-out;
    opacity: 0;
}

.myshop .checkbox-wrapper input:disabled ~ .checkbox-icon,
.myshop .radio-wrapper input:disabled ~ .radio-icon {
    fill: var(--checkbox-and-radio-disabled-color);
}

.myshop .checkbox-wrapper input:focus ~ .checkbox-icon,
.myshop .radio-wrapper input:focus ~ .radio-icon {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.42);
}

.myshop .checkbox-wrapper input:not(:disabled):not(:checked):not(:hover) ~ .checkbox-icon.default,
.myshop .radio-wrapper input:not(:disabled):not(:checked):not(:hover) ~ .radio-icon.default,
.myshop .checkbox-wrapper input:not(:disabled):not(:checked):not(:focus) ~ .checkbox-icon.default,
.myshop .radio-wrapper input:not(:disabled):not(:checked):not(:focus) ~ .radio-icon.default {
        opacity: 1;
    }

.myshop .checkbox-wrapper input:disabled:not(:checked) ~ .checkbox-icon.default,
.myshop .radio-wrapper input:disabled:not(:checked) ~ .radio-icon.default {
    opacity: 1;
}

.myshop .checkbox-wrapper input:not(:disabled):not(:checked):hover ~ .checkbox-icon.hover,
.myshop .radio-wrapper input:not(:disabled):not(:checked):hover ~ .radio-icon.hover,
.myshop .checkbox-wrapper input:not(:disabled):not(:checked):focus ~ .checkbox-icon.hover,
.myshop .radio-wrapper input:not(:disabled):not(:checked):focus ~ .radio-icon.hover {
        opacity: 1;
    }

.myshop .checkbox-wrapper input:checked ~ .checkbox-icon.active,
.myshop .radio-wrapper input:checked ~ .radio-icon.active {
    opacity: 1;
}