﻿
.checkbox-wrapper-26 * {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.checkbox-wrapper-26 input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper-26 label {
    --size: 48px;
    --shadow: calc(var(--size) * .07) calc(var(--size) * .1);
    position: relative;
    display: block;
    width: calc(var(--size) * .9);
    height: calc(var(--size) * .9);
    margin: 0 auto;
    background-color: #f72414;
    border-radius: 50%;
    box-shadow: 0 var(--shadow) #ffbeb8;
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
}

    .checkbox-wrapper-26 label:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        width: calc(var(--size) * .64);
        height: calc(var(--size) * .64);
        margin: 0 auto;
        background-color: #fff;
        transform: translateY(-50%);
        border-radius: 50%;
        box-shadow: inset 0 var(--shadow) #ffbeb8;
        transition: 0.2s ease width, 0.2s ease height;
    }

    .checkbox-wrapper-26 label:hover:before {
        width: calc(var(--size) * .64);
        height: calc(var(--size) * .64);
        box-shadow: inset 0 var(--shadow) #ff9d96;
    }

    .checkbox-wrapper-26 label:active {
        transform: scale(0.9);
    }

.checkbox-wrapper-26 .tick_mark {
    position: absolute;
    top: -1px;
    right: 0;
    left: calc(var(--size) * -.05);
    width: calc(var(--size) * .6);
    height: calc(var(--size) * .6);
    margin: 0 auto;
    margin-left: calc(var(--size) * .14);
    transform: rotateZ(-40deg);
}

    .checkbox-wrapper-26 .tick_mark:before,
    .checkbox-wrapper-26 .tick_mark:after {
        content: "";
        position: absolute;
        background-color: #fff;
        border-radius: 1.5px;
        opacity: 0;
        transition: 0.2s ease transform, 0.2s ease opacity;
    }

    .checkbox-wrapper-26 .tick_mark:before {
        left: 0;
        bottom: 0;
        width: calc(var(--size) * .1);
        height: calc(var(--size) * .3);
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
        transform: translateY(calc(var(--size) * -.68));
    }

    .checkbox-wrapper-26 .tick_mark:after {
        left: 0;
        bottom: 0;
        width: 100%;
        height: calc(var(--size) * .1);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
        transform: translateX(calc(var(--size) * .78));
    }

.checkbox-wrapper-26 input[type="checkbox"]:checked + label {
    background-color: #07d410;
    box-shadow: 0 var(--shadow) #92ff97;
}

    .checkbox-wrapper-26 input[type="checkbox"]:checked + label:before {
        width: 0;
        height: 0;
    }

    .checkbox-wrapper-26 input[type="checkbox"]:checked + label .tick_mark:before,
    .checkbox-wrapper-26 input[type="checkbox"]:checked + label .tick_mark:after {
        transform: translate(0);
        opacity: 1;
    }
