.custom-control-label {

// Background-color and (when enabled) gradient
&::before {
    border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
    @if $enable-transitions {
        transition: $input-transition;
    } 
}

span {
    position: relative;
    top: 2px;
}

}

.custom-control-label {

margin-bottom: 0;

}

.custom-control-input {

&:active~.custom-control-label::before {
    border-color: $custom-control-indicator-active-border-color;
}

}

// Alternative custom control .custom-control-alternative {

.custom-control-label {
    // Background-color and (when enabled) gradient
    &::before {
        border: 0;
        box-shadow: $input-alternative-box-shadow;
    }
} 

.custom-control-input {
    &:checked {
        ~ .custom-control-label {
            &::before {
                box-shadow: $input-focus-alternative-box-shadow;
            }
        }
    }

    &:active~.custom-control-label::before,
    &:focus~.custom-control-label::before {
        box-shadow: $input-alternative-box-shadow;
    }
}

}

// Checkboxes .custom-checkbox {

.custom-control-input~.custom-control-label {
    cursor: pointer;
    font-size: $font-size-sm;
}

.custom-control-input {
    &:checked {
        ~ .custom-control-label {
            &::before {
                border-color: $custom-control-indicator-checked-border-color;
            }
            &::after {
                background-image: $custom-checkbox-indicator-icon-checked;
            }
        }
    }

    &:disabled {
        ~ .custom-control-label {
            &::before {
                border-color: $custom-control-indicator-disabled-bg;
            }
        }

        &:checked {
            &::before {
                border-color: $custom-control-indicator-checked-disabled-bg;
            }
        }
    }
}

}

// Radios .custom-radio {

.custom-control-input~.custom-control-label {
    cursor: pointer;
    font-size: $font-size-sm;
}

.custom-control-input {
    &:checked {
        ~ .custom-control-label {
            &::before {
                border-color: $custom-control-indicator-checked-border-color;
            }
            &::after {
                background-image: $custom-radio-indicator-icon-checked;
            }
        }
    }

    &:disabled {
        ~ .custom-control-label {
            &::before {
                border-color: $custom-control-indicator-disabled-bg;
            }
        }

        &:checked {
            &::before {
                border-color: $custom-control-indicator-checked-disabled-bg;
            }
        }
    }
}

}

// Toggles .custom-toggle {

position: relative;
display: inline-block;
width: 50px;
height: 1.5rem;

input {
    display: none;

    &:checked {
         + .custom-toggle-slider {
            border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;

            &:before {
                background: $custom-toggle-checked-bg;
                transform: translateX(1.625rem);
            }  
        }
    }

    &:disabled {
        + .custom-toggle-slider {
            border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
        }

        &:checked {
            + .custom-toggle-slider {
                border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;

                &:before {
                    background-color: lighten($custom-control-indicator-checked-bg, 10%);
                }
            }
        }
    }
}

}

.custom-toggle-slider {

position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: $custom-control-indicator-border-width solid $input-border-color;
border-radius: 34px !important;
background-color: transparent;

&:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    border-radius: 50% !important;
    background-color: $custom-toggle-slider-bg;
    transition: $input-transition;
}

}