.custom-radio {
    display: none;

    + {
        label {
            font-weight: normal;
            cursor: pointer;

            span {
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
                width: 24px;
                height: 24px;
                cursor: pointer;
                position: relative;
                background-color: $blanco;
                border: 1px solid #EAECEF;
                border-radius: 3px;
                font-weight: 500;

                &::before {
                    content: "";
                    opacity: 0;
                    width: 12px;
                    height: 12px;
                    background-color: $negro;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    bottom: auto;
                    right: auto;
                    transform: translate(-50%, -50%);
                    transition: opacity 0.2s;
                    border-radius: 2px;
                }

                &.circular {
                    border-radius: 50%;

                    &::before {
                        border-radius: 50%;
                    }
                }
            }
        }
    }

    &.border-radius {
        + {
            label {

                span {
                    border-radius: 50%;

                    &::before {
                        border-radius: 50%;
                    }

                    &.circular {
                        border-radius: 50%;

                        &::before {
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
    }

    &:checked {
        + {
            label {
                span {
                    &::before {
                        opacity: 1;
                    }
                }
            }
        }
    }

    &:disabled {
        + {
            label {
                opacity: 0.5;
                cursor: default;

                span {
                    cursor: default;
                }
            }
        }
    }
}