label {
    position: relative;
    margin: 0.675rem 1.35rem;
    display: flex;
    width: auto;
    align-items: center;
    cursor: pointer;
}

.check {
    margin-right: 7px;
    width: 1.35rem;
    height: 1.35rem;
}

    .check #border {
        fill: none;
        stroke: #7a7a8c;
        stroke-width: 3;
        stroke-linecap: round;
    }

    .check #dot {
        fill: url(#gradient);
        transform: scale(0);
        transform-origin: 50% 50%;
    }

.custom_radio {
    display: none;
}

    input:checked + label {
        background: linear-gradient(180deg, #ff8a00, #da1b60);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

        input:checked + label svg #border {
            stroke: url(#gradient);
            stroke-dasharray: 145;
            stroke-dashoffset: 145;
            animation: checked 500ms ease forwards;
        }

        input:checked + label svg #dot {
            transform: scale(1);
            transition: transform 500ms cubic-bezier(0.57, 0.21, 0.69, 3.25);
        }

@keyframes checked {
    to {
        stroke-dashoffset: 0;
    }
}