@use "sass-rem/rem" as sass-rem;

@use "../theme_variables_common" as common;

@use "./bootstrap_utils" as bootstrap;
@use "./mixins";
@use "./typography";

.form-horizontal {
    .form-group {
        display: flex;
        margin-bottom: 0.5rem;

        @include bootstrap.media-breakpoint-down(sm) {
            margin-bottom: 1rem;
        }

        &>div {
            display: flex;
            align-items: center;
            float: left;
        }
    }

    .control-label {
        float: left;
        text-align: right;
        margin-bottom: 0;

        @include bootstrap.media-breakpoint-down(sm) {
            margin-bottom: .5rem;
        }
    }

    .help-block {
        display: flex;
    }

    .badge {
        font-family: var(--font-family-bold);
        font-size: var(--font-size-xsm);
        line-height: sass-rem.rem(13px);
        padding: .2em .6em .3em;
    }
}

// This is used to implement updated validation handling where errors aren't shown until submit
// See register.component for implementation example.
// Moved in front so other styles (active, focus) will overwrite if needed --TT
.override-error-style {
    border-color: var(--input-border-color) !important;
    color: var(--input-color) !important;
}

input.hide-errors {
    @extend .override-error-style;
}

.hide-errors {
    & .input-error {
        display: none;
    }

    & .ng-invalid,
    &>input {
        @extend .override-error-style;
    }
}

.form-control {
    display: block !important;
    width: 100% !important;
    height: 32px !important;
    font-size: sass-rem.rem(14px) !important;
    line-height: 1.428571429 !important;
    color: var(--input-color) !important;
    background-color: var(--input-bg) !important;
    background-image: none !important;
    border: 1px solid var(--input-border-color) !important;
    border-radius: 1px !important;
    transition: none !important;
    box-shadow: none;
    padding: $padding-base-vertical $padding-input-horizontal  !important;
    caret-color: var(--input-color) !important;

    @include mixins.placeholder();

    // Override browser stylesheets
    // https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
    // https://stackoverflow.com/a/63589498
    &:autofill,
    &:autofill:hover,
    &:autofill:focus,
    &:autofill:active,
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
        -webkit-text-fill-color: var(--input-color);
        -webkit-box-shadow: 0 0 0 40px var(--input-bg) inset !important;
    }

    &:disabled,
    &[disabled],
    &[readonly] {
        opacity: .4;
        color: var(--input-disabled-color) !important;
        border-color: var(--input-disabled-border-color) !important;
        pointer-events: none;

        &:hover,
        &:focus {
            border-color: var(--input-border-color) !important;
        }
    }

    &[type="password"] {
        font-family: "Roboto", "Helvetica", sans-serif; // reset font to show dots and not Japanese currency
    }

    &:hover {
        border-color: var(--input-hover-border-color);
    }

    &:focus,
    &:active {
        border-color: var(--input-focus-border-color) !important;
        outline: 1px solid var(--input-focus-border-color) !important;
        outline-offset: 0;
        box-shadow: 0 0 0 2px var(--input-focus-shadow-color);
        &.inset {
            @include common.inset-outline;
        }
    }

    &[class*="ng-invalid"]:not(.ng-untouched):not(.notYetSubmitted):not(.hide-errors) {
        color: var(--input-error-color) !important;
        -webkit-text-fill-color: var(--input-error-color);

        &:not(:focus) {
            border-color: var(--input-error-border-color) !important;
            outline: none !important;
        }


        +.input-group-addon {
            border-color: transparent;
            background-color: transparent;
        }
    }
}

.form-component {
    caret-color: var(--input-color) !important;

    // Override browser stylesheets
    // https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
    // https://stackoverflow.com/a/63589498
    &:autofill,
    &:autofill:hover,
    &:autofill:focus,
    &:autofill:active,
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
        -webkit-text-fill-color: var(--input-color);
        -webkit-box-shadow: 0 0 0 40px var(--input-bg) inset !important;
    }

    input {
        border: 1px solid var(--input-border-color);
        caret-color: var(--input-color) !important;

        // Override browser stylesheets
        // https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
        // https://stackoverflow.com/a/63589498
        &:autofill,
        &:autofill:hover,
        &:autofill:focus,
        &:autofill:active,
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
            -webkit-text-fill-color: var(--input-color);
            -webkit-box-shadow: 0 0 0 40px var(--input-bg) inset !important;
        }

        &:focus,
        &:active {
            border-color: var(--input-focus-border-color) !important;
            outline: 1px solid var(--input-focus-border-color) !important;
            outline-offset: 0;
            box-shadow: 0 0 0 2px var(--input-focus-shadow-color);
            &.inset {
                @include common.inset-outline;
            }
        }
    }

    &.ng-untouched {
        input {
            border: 1px solid var(--input-border-color);
            color: var(--input-color) !important;
        }
    }

    &[class*="ng-invalid"]:not(.ng-untouched) {
        input {
            border: 1px solid var(--input-error-border-color) !important;
            color: var(--input-error-color) !important;

            +.input-group-addon {
                border-color: transparent;
                background-color: transparent;
            }

            &:focus {
                border: var(--input-focus-border-color) !important;
            }
        }
    }
}

.input-error {
    @include typography.regular13nocolor;
    color: var(--error-label);
    line-height: 1rem;

    @include bootstrap.media-breakpoint-down(sm) {
        margin-top: .5rem;
    }
}

.input-info {
    @include typography.regular11nocolor;
    color: var(--body-text-color);
    line-height: 1rem;

    @include bootstrap.media-breakpoint-down(sm) {
        margin-top: .5rem;
    }
}

.form-control-row {
    height: 32px;
}

.form-control-static {
    min-height: 32px;
}

.btn.form-control {
    text-align: left !important;

    .caret {
        float: right;
        margin-top: 8px;
    }
}

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
}
