div.radio {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;

    div.option {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;

        span.text {
            flex: 1;
        }

        div {
            position: relative;
            height: 20px;
            width: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            border: solid 2px var(--color-grey);
            border-radius: 50%;
            padding: 3px;
            transition: 0.2s;

            span {
                width: 100%;
                height: 100%;
                display: block;
                background-color: var(--color-primary);
                opacity: 0;
                border-radius: 50%;
                transition: .2s;
            }
        }

    }

    div.option:hover, div.option.active {
        div {
            border-color: var(--color-primary);
        }
    }

    div.option.active {
        div {
            span {
                opacity: 1;
            }
        }
    }

    input {
        display: none;
    }
}