Eu fiz o meu código um pouco diferente. Gostaria de saber qual é o método mais utilizado hoje? Através do span?

E também gostaria de saber se tem como fazer com que fique um espaço branco entre a cor de fundo do checkbox. Como se tivesse o padding. No modelo do figma tem um espaço.. eu tentei fazer mas não tive sucesso.

.opcao{
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: var(--gap-xs);
}

.opcao input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--cinzaescuro);
    border-radius: 2px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
}

.opcao input[type="checkbox"]:checked{
    background-color: var(--coral);
}