$chbx_size: 18px;
$bg-chbx: $color1;
$border-color: $blanco;
$border-width: 2px;
$bg-chbx-checked: $blanco;

.custom-checkbox {
    display: none;

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

            span {
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
                width: $chbx_size;
                height: $chbx_size;
                cursor: pointer;
                position: relative;
                border: $border-width solid $border-color;
				background-color: $bg-chbx;
				border-radius: 3px;
				font-weight: 500;

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

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

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

                span {
                    cursor: default;
                }
            }
        }
    }
}