@use 'sass:color';
@use '../../styles/bootstrap/mixins/gradients';
@use '../../styles/mixins/hover';
@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/variables';

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `$input-focus-border-color` 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() {
    &:focus {
        color: bootstrap-variables.$input-focus-color;
        border-color: variables.$input-focus-border-color;
        outline: 0;
        // Avoid using mixin so we can pass custom focus shadow properly
        @if variables.$enable-shadows {
            box-shadow: variables.$box-shadow-none, variables.$box-shadow-none;
        } @else {
            box-shadow: variables.$box-shadow-none;
        }
    }
    &:not([disabled]):not(.disabled):not(.is-invalid) {
        &:focus {
            border-color: variables.$input-focus-border-color;
        }
    }
}

@mixin thy-form-validation-state($state, $color) {
    .form-control {
        &.thy-invalid {
            border-color: $color;
        }
    }
}

@mixin form-validation-state($state, $color) {
    .#{$state}-feedback {
        display: none;
        width: 100%;
        margin-top: bootstrap-variables.$form-feedback-margin-top;
        color: $color;
    }

    .#{$state}-tooltip {
        position: absolute;
        top: 100%;
        z-index: 5;
        display: none;
        max-width: 100%; // Contain to parent when possible
        padding: 0.5rem;
        margin-top: 0.1rem;
        font-size: 0.875rem;
        line-height: 1;
        color: variables.$white;
        background-color: rgba($color, 0.8);
        border-radius: 0.2rem;
    }

    // custom select
    .is-#{$state} {
        .form-control {
            border-color: $color !important;
            &:hover {
                border-color: $color;
            }
        }
    }

    .form-control,
    .thy-select,
    .thy-radio-group,
    .custom-select,
    .thy-cascader,
    .thy-date-picker,
    .thy-input-number,
    .thy-calendar-picker,
    .thy-switch,
    .thy-rate,
    .thy-color-picker,
    .thy-checkbox,
    .thy-slider,
    .input-label-container {
        .was-validated &:#{$state},
        &.is-#{$state} {
            border-color: $color;

            ~ .#{$state}-feedback,
            ~ .#{$state}-tooltip {
                display: block;
            }
        }
    }

    .form-check-input {
        .was-validated &:#{$state},
        &.is-#{$state} {
            ~ .form-check-label {
                color: $color;
            }

            ~ .#{$state}-feedback,
            ~ .#{$state}-tooltip {
                display: block;
            }
        }
    }

    .custom-control-input {
        .was-validated &:#{$state},
        &.is-#{$state} {
            ~ .custom-control-label {
                color: $color;

                &::before {
                    background-color: color.adjust($color, $lightness: 25%);
                }
            }

            ~ .#{$state}-feedback,
            ~ .#{$state}-tooltip {
                display: block;
            }

            &:checked {
                ~ .custom-control-label::before {
                    @include gradients.gradient-bg(color.adjust($color, $lightness: 10%));
                }
            }

            &:focus {
                ~ .custom-control-label::before {
                    box-shadow:
                        0 0 0 1px bootstrap-variables.$body-bg,
                        0 0 0 bootstrap-variables.$input-focus-width rgba($color, 0.25);
                }
            }
        }
    }

    // custom file
    .custom-file-input {
        .was-validated &:#{$state},
        &.is-#{$state} {
            ~ .custom-file-label {
                border-color: $color;

                &::before {
                    border-color: inherit;
                }
            }

            ~ .#{$state}-feedback,
            ~ .#{$state}-tooltip {
                display: block;
            }

            &:focus {
                ~ .custom-file-label {
                    box-shadow: 0 0 0 bootstrap-variables.$input-focus-width rgba($color, 0.25);
                }
            }
        }
    }
}

@mixin set-input-hover-border($border-color: $input-hover-border) {
    &:not([disabled]):not(.disabled):not(.is-invalid) {
        @include hover.hover {
            border-color: $border-color;
        }
    }
}

@mixin set-select-arrow() {
    content: '\e6b8';
    font: normal normal normal 14px/1 wtf;
    position: absolute;
    right: 12px;
    bottom: variables.$input-padding-y + (variables.$font-size-base * variables.$line-height-base - variables.$font-size-md) * 0.5;
    font-size: variables.$font-size-md;
    pointer-events: none;
    color: variables.$gray-500;
    z-index: 10;
}
