//
// Custom Forms
// --------------------------------------------------

// Switch controls
.custom-switch {
    padding-left: 0;

    .custom-control-label {
        left: 0;
        padding-left: 2.5rem;

        &::before {
            top: (($line-height-base - 1.25rem) / 2);
            left: 0;
            width: 2rem;
            height: 1.25rem;
            border-radius: 1rem;
            transition: background-color .15s ease-out;
        }

        &::after {
            top: (($line-height-base - 1rem) / 2);
            left: .125rem;
            width: 1rem;
            height: 1rem;
            transform: none;
            background-color: $white;
            border-radius: 1rem;
            box-shadow: .125rem 0 .125rem rgba(0,0,0,.1);
        }
    }

    .custom-control-input:checked ~ .custom-control-label::after {
        transform: translateX(.75rem);
        background-color: $white;
        box-shadow: -.125rem 0 .125rem rgba(0,0,0,.2);
    }
}

// Block controls
.custom-block {
    padding: 0;

    .custom-control-label {
        width: 100%;
        padding: .75rem;
        background-color: $white ;
        border: 2px solid darken(theme-color('light'), 10%);
        border-radius: $border-radius-sm;
        cursor: pointer;

        &:hover {
            border-color: darken(theme-color('light'), 20%);
        }

        &::before,
        &::after {
            display: none;
        }
    }

    .custom-block-indicator {
        position: absolute;
        display: none;
        top: -.5rem;
        right: -.5rem;
        width: 1.75rem;
        height: 1.75rem;
        line-height: 1.75rem;
        color: $white;
        font-size: .625rem;
        text-align: center;
        background-color: darken(theme-color('light'), 30%);
        border-radius: .875rem;
        z-index: 1;
    }

    .custom-control-input:checked ~ .custom-control-label {
        border-color: darken(theme-color('light'), 30%);
    }

    .custom-control-input:focus ~ .custom-control-label {
        box-shadow: 0 0 .5rem rgba(0,0,0,.15);
    }

    .custom-control-input:checked ~ .custom-block-indicator {
        display: block;
    }

    .custom-control-input:disabled + label,
    .custom-control-input[readonly] + label,
    .custom-control-input:disabled + label + span,
    .custom-control-input[readonly] + label + span {
        opacity: .5;
    }
}

// Add transitions to custom controls
.custom-control-label::before {
    border: none;
}

.custom-control-label::after {
    transition: transform .15s ease-out;
}

// Checkboxes shape variants and icon rotate transforms
.custom-checkbox {
    &.custom-checkbox-square {
        .custom-control-label::before {
            border-radius: 0;
        }
    }

    &.custom-checkbox-rounded-circle {
        .custom-control-label::before {
            border-radius: 1rem;
        }
    }

    .custom-control-label::after {
        transform: rotate(-90deg);
    }

    .custom-control-input:checked ~ .custom-control-label::after {
        transform: rotate(0deg);
    }
}

// Color variants for all custom controls
.custom-control-primary {
    @include custom-control-variant($body-bg-dark, theme-color("primary"));
}

.custom-control-success {
    @include custom-control-variant(lighten(theme-color("success-light"), 10%), theme-color("success"));
}

.custom-control-info {
    @include custom-control-variant(lighten(theme-color("info-light"), 10%), theme-color("info"));
}

.custom-control-warning {
    @include custom-control-variant(lighten(theme-color("warning-light"), 10%), theme-color("warning"));
}

.custom-control-danger {
    @include custom-control-variant(lighten(theme-color("danger-light"), 10%), theme-color("danger"));
}

.custom-control-light {
    @include custom-control-variant(gray("300"), gray("500"));
}

.custom-control-dark {
    @include custom-control-variant(gray("300"), theme-color("dark"));
}

// Size variants for all custom controls
.custom-control-lg {
    padding-left: 1.75rem;

    .custom-control-label {
        &::before,
        &::after {
            top: (($line-height-base - 1.25rem) / 2);
            left: -1.75rem;
            width: 1.25rem;
            height: 1.25rem;
        }
    }

    &.custom-switch {
        padding-left: 0;

        .custom-control-label {
            padding-left: 3.25rem;

            &::before {
                top: (($line-height-base - 1.625rem) / 2);
                left: 0;
                width: 2.75rem;
                height: 1.625rem;
            }

            &::after {
                top: (($line-height-base - 1.25rem) / 2);
                left: .25rem;
                width: 1.25rem;
                height: 1.25rem;
            }
        }

        .custom-control-input:checked ~ .custom-control-label::after {
            transform: translateX(1rem);
        }
    }
}