/* classe base */
.pga-radio {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    font-size: calc(var(--pga-font-size-base)+ 8px);
}

/* Esconde o radio buton nativo do browser */
.pga-radio >input {
    margin-top: 30px;
    opacity: 0;
    position: absolut;
    cursor: pointer;
}

/* estilo base do chackmark */
.pga-radio >.checkmark {
    display: inline-block;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    border: 2px solid var(--pga-color-primary);
    position: absolute;
    top: 25px;
    left: 0;
}

/* estiliza e preenche o fundo do checkmark qdo o radio buton é checado */
.pga-radio >input:checked ~ .checkmark {
    background-color: #fff;
}

/* Estilo base do ponto */
.pga-radio >.checkmark:after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    content: "";
    top: 3.5px;
    left: 3.5px;
    background-color: var(--pga-color-primary);
    display: none;
}

.pga-radio >input:checked ~ .checkmark::after {
    display: block;
}