@use '../variables';
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.

@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
    // Color the label and help text
    .help-block,
    .control-label,
    .radio,
    .checkbox,
    .radio-inline,
    .checkbox-inline,
    &.radio label,
    &.checkbox label,
    &.radio-inline label,
    &.checkbox-inline label {
        color: $text-color;
    }
    // Set the border and box shadow on specific inputs to match
    .form-control {
        border-color: $border-color;
        &:focus {
            border-color: $border-color;
            @include form-control-focus($border-color);
        }
    }
    // Set validation states also for addons
    .input-group-addon {
        color: $text-color;
        border-color: $border-color;
        background-color: $background-color;
    }
    // Optional feedback icon
    .form-control-feedback {
        color: $text-color;
    }
    // Custom checkboxes
    .radio input[type='radio'],
    .radio-inline input[type='radio'],
    .checkbox input[type='checkbox'],
    .checkbox-inline input[type='checkbox'] {
        ~ label {
            &:before {
                box-shadow:
                    1px 1px 0 $border-color,
                    // bottom-right
                    -1px 1px 0 $border-color,
                    // bottom-left
                    1px -1px 0 $border-color,
                    // top-right
                    -1px -1px 0 $border-color; // top-left;
            }
        }
        &:focus {
            ~ label {
                &:before {
                    box-shadow:
                        2px 2px 0 $border-color,
                        // bottom-right
                        -2px 2px 0 $border-color,
                        // bottom-left
                        2px -2px 0 $border-color,
                        // top-right
                        -2px -2px 0 $border-color; // top-left;
                }
            }
        }
    }
    // Custom switch
    .switch {
        input {
            ~ label.switch-toggle {
                @include form-control-focus($border-color);
            }
            &:focus {
                ~ label.switch-toggle {
                    box-shadow:
                        2px 2px 0 $border-color,
                        // bottom-right
                        -2px 2px 0 $border-color,
                        // bottom-left
                        2px -2px 0 $border-color,
                        // top-right
                        -2px -2px 0 $border-color; // top-left;
                }
            }
        }
    }
}

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `$input-border-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
@mixin form-control-focus($color: variables.$input-border-focus, $size: 1px) {
    border-color: $color;
    outline: 0;
    box-shadow:
        #{$size} #{$size} 0 $color,
        // bottom-right
        -#{$size} #{$size} 0 $color,
        // bottom-left
        #{$size} -#{$size} 0 $color,
        // top-right
        -#{$size} -#{$size} 0 $color; // top-left
}

// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
// [converter] $parent hack
@mixin input-size(
    $parent,
    $input-height,
    $padding-vertical,
    $padding-horizontal,
    $font-size,
    $line-height,
    $border-radius
) {
    #{$parent} {
        height: $input-height;
        padding: $padding-vertical $padding-horizontal;
        font-size: $font-size;
        line-height: $line-height;
        border-radius: $border-radius;
    }

    select#{$parent} {
        height: $input-height;
        line-height: $input-height;
    }

    textarea#{$parent},
    select[multiple]#{$parent} {
        height: auto;
    }
}

// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.

// [converter] extracted from `.form-inline` for libsass compatibility
@mixin form-inline {
    // Kick in the inline
    @media (min-width: variables.$screen-sm-min) {
        // Inline-block all the things for "inline"
        .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

        // In navbar-form, allow folks to *not* use `.form-group`
        .form-control {
            display: inline-block;
            width: auto; // Prevent labels from stacking above inputs in `.form-group`
            vertical-align: middle;
        }

        // Make static controls behave like regular ones
        .form-control-static {
            display: inline-block;
        }

        .input-group {
            display: inline-table;
            vertical-align: middle;

            .input-group-addon,
            .input-group-btn,
            .form-control {
                width: auto;
            }
        }

        // Input groups need that 100% width though
        .input-group > .form-control {
            width: 100%;
        }

        .control-label {
            margin-bottom: 0;
            vertical-align: middle;
        }

        // Remove default margin on radios/checkboxes that were used for stacking, and
        // then undo the floating of radios and checkboxes to match.
        .radio,
        .checkbox {
            display: inline-block;
            margin-top: 0;
            margin-bottom: 0;
            vertical-align: middle;

            label {
                padding-left: 0;
            }
        }
        .radio input[type='radio'],
        .checkbox input[type='checkbox'] {
            position: relative;
            margin-left: 0;
        }

        // Re-override the feedback icon.
        .has-feedback .form-control-feedback {
            top: 0;
        }
    }
}

@mixin switch($height) {
    $round-button-size: $height - 6;
    $width: ($round-button-size * 2) + 6;

    label {
        line-height: $height;

        &.switch-toggle {
            height: $height;
            width: $width;
            border-radius: $height * 0.5;
            font-size: $height * 0.5;

            .on-off {
                height: $round-button-size;
                width: $round-button-size;
                line-height: $round-button-size;
                border-radius: 50%;

                &:after {
                    margin-left: $width * 0.5;
                }
                &:before {
                    margin-left: -$width * 0.5;
                }
            }
        }
    }
    input {
        &:checked {
            ~ label.switch-toggle {
                .on-off {
                    left: $width * 0.5;
                }
            }
        }
    }
}