@use 'sass:meta';
@use '../../styles/bootstrap/mixins/border-radius';
@use '../../styles/bootstrap/mixins/breakpoints';
@use '../../styles/bootstrap/mixins/text-truncate';
@use '../../styles/bootstrap/mixins/transition';
@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/variables';
@use '../../styles/mixins/link';
@use 'mixin';

// stylelint-disable selector-no-qualifying-type

//
// Textual form controls
//

.form-control {
    display: block;
    width: 100%;
    padding: variables.$input-padding-y variables.$input-padding-x;
    font-size: variables.$input-font-size;
    line-height: bootstrap-variables.$input-line-height;
    color: variables.$input-color;
    background-color: bootstrap-variables.$input-bg;
    background-clip: padding-box;
    border: bootstrap-variables.$input-border-width solid variables.$input-border-color;

    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
    @if bootstrap-variables.$enable-rounded {
        // Manually use the if/else instead of the mixin to account for iOS override
        border-radius: bootstrap-variables.$input-border-radius;
    } @else {
        // Otherwise undo the iOS default
        border-radius: 0;
    }

    @include transition.transition(bootstrap-variables.$input-transition);

    // Unstyle the caret on `<select>`s in IE10+.
    &::-ms-expand {
        background-color: transparent;
        border: 0;
    }

    // Customize the `:focus` state to imitate native WebKit styles.
    @include mixin.form-control-focus();

    // Placeholder
    &::placeholder {
        color: variables.$input-placeholder-color;
        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
        opacity: 1;
    }
    &:placeholder-shown {
        text-overflow: ellipsis;
    }

    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &.disabled,
    &:disabled {
        cursor: variables.$disabled-cursor;
        background-color: variables.$input-disabled-bg;
        color: variables.$input-disabled-color;
        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
        opacity: 1;
        // 如果 input 框禁用了，后面的反馈图标颜色变浅
        // & + .form-control-feedback {
        //   color: $input-disabled-color;
        // }
    }

    // Thy Custom readonly is not disabled-bg
    &[readonly] {
        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
        opacity: 1;
    }

    // Thy Custom
    // fix bug about form-control state is invalid can't show hover style
    // 修复当元素有 required 验证时，鼠标移动上去没有边框颜色的 Bug， 因为元素是 invalid 状态
    @include mixin.set-input-hover-border(variables.$input-hover-border-color);
}

// select.form-control {
//   &:not([size]):not([multiple]) {
//     height: $input-height;
//   }

//   &:focus::-ms-value {
//     // Suppress the nested default white text on blue background highlight given to
//     // the selected option text when the (still closed) <select> receives focus
//     // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
//     // match the appearance of the native widget.
//     // See https://github.com/twbs/bootstrap/issues/19398.
//     color: $input-color;
//     background-color: $input-bg;
//   }
// }

// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
    display: block;
    width: 100%;
}

//
// Labels
//

// For use with horizontal and inline forms, when you need the label (or legend)
// text to align with the form controls.
.col-form-label {
    padding-top: calc(#{variables.$input-padding-y} + #{bootstrap-variables.$input-border-width});
    padding-bottom: calc(#{variables.$input-padding-y} + #{bootstrap-variables.$input-border-width});
    margin-bottom: 0; // Override the `<label>/<legend>` default
    font-size: inherit; // Override the `<legend>` default
    line-height: bootstrap-variables.$input-line-height;
    // THY CUSTOM
    // color: $input-label-color;
    text-align: right;
    padding-right: 10px;
}

// THY CUSTOM
.form-label {
    color: variables.$form-label-color;
    .label-tips-icon {
        margin-left: 6px;
        font-size: variables.$font-size-base;
        cursor: variables.$hand-cursor;
        @include link.link-variant(variables.$gray-500, none, variables.$primary, none);
    }
}

// form 左右布局 padding 减少
.col-form-control {
    padding-left: 10px;
}

.col-form-label-lg {
    padding-top: calc(#{variables.$input-padding-y-lg} + #{bootstrap-variables.$input-border-width});
    padding-bottom: calc(#{variables.$input-padding-y-lg} + #{bootstrap-variables.$input-border-width});
    font-size: variables.$font-size-base;
    line-height: bootstrap-variables.$input-line-height-lg;
}

.col-form-label-sm {
    padding-top: calc(#{variables.$input-padding-y-sm} + #{bootstrap-variables.$input-border-width});
    padding-bottom: calc(#{variables.$input-padding-y-sm} + #{bootstrap-variables.$input-border-width});
    font-size: variables.$font-size-sm;
    line-height: bootstrap-variables.$input-line-height-sm;
}

// Readonly controls as plain text
//
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)

.form-control-plaintext {
    display: block;
    width: 100%;
    padding-top: variables.$input-padding-y;
    padding-bottom: variables.$input-padding-y;
    margin-bottom: 0; // match inputs if this class comes on inputs with default margins
    line-height: bootstrap-variables.$input-line-height;
    background-color: transparent;
    border: solid transparent;
    border-width: bootstrap-variables.$input-border-width 0;
    outline: none;

    &.form-control-sm,
    &.form-control-lg {
        padding-right: 0;
        padding-left: 0;
    }
}

// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.

// select.form-control-sm {
//   &:not([size]):not([multiple]) {
//     height: $input-height-sm;
//   }
// }

.form-control-lg {
    padding: variables.$input-padding-y-lg variables.$input-padding-x-lg;
    // 最大的输入框字体是 24px
    font-size: variables.$input-font-size-lg;
    line-height: bootstrap-variables.$input-line-height-lg;
    @include border-radius.border-radius(bootstrap-variables.$input-border-radius-lg);
}

.form-control-sm {
    padding: variables.$input-padding-y-sm variables.$input-padding-x-sm;
    font-size: variables.$input-font-size-sm;
    line-height: bootstrap-variables.$input-line-height-sm;
    @include border-radius.border-radius(bootstrap-variables.$input-border-radius-sm);
}

// select.form-control-lg {
//   &:not([size]):not([multiple]) {
//     height: $input-height-lg;
//   }
// }

.form-control-xs {
    padding: variables.$input-padding-y-xs variables.$input-padding-x-xs;
    font-size: variables.$font-size-sm;
    line-height: variables.$input-line-height-xs;
    @include border-radius.border-radius(variables.$input-border-radius-xs);
}

// select.form-control-xs {
//   &:not([size]):not([multiple]) {
//     height: $input-height-xs;
//   }
// }

.form-control-md {
    padding: variables.$input-padding-y-md variables.$input-padding-x-md;
    font-size: variables.$font-size-base;
    line-height: variables.$input-line-height-md;
    @include border-radius.border-radius(variables.$input-border-radius-md);
}

.form-control-active {
    color: bootstrap-variables.$input-focus-color;
    background-color: variables.$input-focus-bg;
    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;
    }
}

// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
    // display: block;
    margin-bottom: bootstrap-variables.$form-group-margin-bottom;
}

.form-text {
    display: block;
    margin-top: bootstrap-variables.$form-text-margin-top;
}

// Form grid
//
// Special replacement for our grid system's `.row` for tighter form layouts.

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;

    > .col,
    > [class*='col-'] {
        padding-right: 5px;
        padding-left: 5px;
    }
}

// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.

// @include form-validation-state("valid", $form-feedback-valid-color);
@include mixin.form-validation-state('invalid', bootstrap-variables.$form-feedback-invalid-color);
@include mixin.thy-form-validation-state('invalid', bootstrap-variables.$form-feedback-invalid-color);

// 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).

.form-inline,
.thy-form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)

    // Because we use flex, the initial sizing of checkboxes is collapsed and
    // doesn't occupy the full-width (which is what we want for xs grid tier),
    // so we force that here.
    .form-check {
        width: 100%;
    }

    // Kick in the inline
    @include breakpoints.media-breakpoint-up(sm) {
        label {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
        }

        // Inline-block all the things for "inline"
        .form-group {
            display: flex;
            flex: 0 0 auto;
            flex-flow: row wrap;
            align-items: center;
            margin-bottom: 0;
            margin-right: 10px;
        }

        // 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;
        }

        .form-label {
            margin-right: 10px;
        }

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

        .input-group {
            width: auto;
        }

        // Remove default margin on radios/checkboxes that were used for stacking, and
        // then undo the floating of radios and checkboxes to match.
        .form-check {
            display: flex;
            align-items: center;
            justify-content: center;
            width: auto;
            padding-left: 0;
            padding-bottom: 0px;
        }

        .form-check-input {
            position: relative;
            margin-top: 0;
            margin-right: bootstrap-variables.$form-check-input-margin-x;
            margin-left: 0;
        }

        .custom-control {
            align-items: center;
            justify-content: center;
        }

        .custom-control-label {
            margin-bottom: 0;
        }
    }
}

// Form Thy Custom Styles

.label-required {
    &::before {
        content: '*';
        color: variables.$danger;
        margin-right: 4px;
        position: relative;
        top: 3px;
    }

    &--after {
        &::before {
            content: none;
        }

        &::after {
            content: '*';
            color: variables.$danger;
            margin-left: 4px;
            position: relative;
            top: 3px;
        }
    }
}

// .form-control-container {
//   padding-right: 0px;
// }

.thy-form {
    .row-fill {
        margin-right: 0px;
        margin-left: 0px;
    }

    .form-group {
        &:last-child {
            margin-bottom: 0;
        }
    }

    .form-group-footer {
        display: flex;
        align-items: center;

        .form-footer-description {
            flex: 1;
            @include text-truncate.text-truncate();
        }

        &.form-group-footer-align-left {
            flex-direction: row;
            .form-footer-description {
                margin-left: 30px;
                text-align: right;
            }
        }
        &.form-group-footer-align-center {
            justify-content: center;
            .form-footer-description {
                margin-left: 30px;
                text-align: right;
            }
        }
        &.form-group-footer-align-right {
            flex-direction: row-reverse;
            .form-footer-description {
                margin-right: 30px;
                text-align: left;
            }
        }
    }
}

.thy-form-vertical {
    .form-group {
        display: block;
        .label-required {
            &::before {
                content: none;
            }

            &::after {
                content: '*';
                color: variables.$danger;
                margin-left: 4px;
                position: relative;
                top: 0px;
            }
        }
    }
}

.invalid-feedback {
    line-height: 1;
    font-size: 0.75rem;
}

@include meta.load-css('./form-check');
