@import './scss/ca-input.colors.scss';
@import 'scss/styles.scss';

@import 'scss/custompickers.scss';

.input-custom-group {
    display: block;
    position: relative; // DateTime Dark
    .location-area-filter {
        background-color: $default-counter-content !important;
        color: $valid-focus-content !important;

        &.focus,
        &.focus:hover {
            background-color: $default-counter-content !important;
            color: $default-removed-background-input-focus-text !important;
        }

        &.focus::placeholder {
            background-color: $default-counter-content !important;
        }

        &:focus {
            background-color: $default-counter-content !important;
            color: $default-removed-background-input-focus-text !important;
        }
    }

    &:hover {
        &.required-label-table {
            label {
                span {
                    color: $default-label !important;
                }
            }
        }
    }

    //--------------- Classes on all INPUT ELEMENTS ---------------
    &.custom-empty-hover {
        &:hover {
            transition: 0.3s ease-in-out;

            .input-dropdown-arrow,
            .input-icon,
            app-ca-input-placeholder-icon {
                &:hover ~ .input-control {
                    background-color: $default-on-input-hover;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $default-on-input-hover;
                }
            }
        }
    }

    &.custom-filled-hover {
        &:hover {
            .input-clear {
                display: inline-block;
            }

            transition: 0.3s ease-in-out;

            .input-dropdown-arrow,
            .input-icon,
            app-ca-input-placeholder-icon,
            .input-clear {
                &:hover ~ .input-control {
                    background-color: $default-on-input-hover;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $default-on-input-hover;
                }
            }
        }
    }

    &.input-remove-trash-can {
        &:hover {
            .input-clear {
                display: inline-block !important;

                &:hover ~ .input-control {
                    background-color: $default-on-input-hover;
                }
            }
            .placeholder-icon-right-side {
                opacity: 0;
            }
        }
    }

    &.input-remove-background {
        &:hover {
            .input-control {
                background: transparent !important;
            }
        }

        &.input-blue-text {
            color: red;
        }

        .input-control {
            background: transparent;
            color: $valid-content;
            font-weight: 400;

            &.focus,
            &.focus:hover {
                background: $default-removed-background-input-focus !important;
                color: $default-removed-background-input-focus-text !important;
            }

            &.focus::placeholder {
                color: $default-removed-background-input-focus-text !important;
            }

            &:focus {
                background: $default-removed-background-input-focus !important;
                color: $default-removed-background-input-focus-text !important;
            }
        }

        .input-dropdown-arrow {
            svg {
                path {
                    fill: $default-removed-background-arrow !important;
                }
            }
        }
    }

    &.input-blue-text {
        .input-control {
            color: $default-focus-commands-rect-hover-blue-commands;
        }
    }

    &.invalid-filled-focus-out {
        &:hover {
            transition: 0.3s ease-in-out;

            .input-clear,
            .input-pen-container,
            .input-invalid-danger-mark,
            .input-dropdown-arrow,
            .input-icon,
            .input-label-counter,
            .input-password-eye,
            app-ca-input-password,
            app-ca-input-placeholder-icon,
            app-ca-input-clear {
                display: inline-block;

                &:hover ~ .input-control {
                    background-color: $invalid-input-hover;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $invalid-input-hover;
                }
            }

            .input-label-counter {
                display: flex;
            }
        }
    }

    &.invalid-empty-focus-out {
        &:hover {
            transition: 0.3s ease-in-out;

            .input-clear {
                display: none;
            }

            &.input-remove-trash-can {
                app-ca-input-clear {
                    .trash-can-svg {
                        .input-clear-x {
                            svg {
                                path {
                                    fill: $default-placeholderIcon-red;
                                }
                                rect {
                                    fill: $default-placeholderIcon-red;
                                }
                            }
                            &:hover {
                                svg {
                                    path {
                                        fill: $ta-red-14;
                                    }
                                    rect {
                                        fill: $ta-red-14;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .input-pen-container,
            .input-invalid-danger-mark,
            .input-dropdown-arrow,
            app-ca-input-placeholder-icon,
            .input-icon {
                display: inline-block;

                &:hover ~ .input-control {
                    background-color: $invalid-input-hover;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $invalid-input-hover;
                }
            }
        }
    }

    &.invalid-focus-in {
        &:hover {
            transition: 0.3s ease-in-out;

            .input-password-eye,
            app-ca-input-password,
            app-ca-input-placeholder-icon,
            app-ca-input-clear {
                &:hover ~ .input-control {
                    background-color: $invalid-focus-input;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $invalid-focus-input;
                }
            }
        }
    }

    &.valid-focus-out {
        &:hover {
            transition: 0.3s ease-in-out;

            .input-clear,
            .input-pen-container,
            .input-dropdown-arrow,
            .input-icon,
            .input-label-counter,
            .input-password-eye,
            app-ca-input-password,
            app-ca-input-placeholder-icon,
            app-ca-input-clear {
                display: inline-block;
                transition: 0.3s ease-in-out;

                &:hover ~ .input-control {
                    background-color: $valid-input-hover;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $valid-input-hover;
                }
            }

            .input-label-counter {
                display: flex;
            }

            .input-required-check {
                display: none;
            }
        }
    }

    &.valid-focus-in {
        &:hover {
            transition: 0.3s ease-in-out;

            .trash-can-svg,
            .input-password-eye,
            app-ca-input-password,
            app-ca-input-placeholder-icon,
            app-ca-input-clear {
                &:hover ~ .input-control {
                    background-color: $valid-focus-input;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $valid-focus-input;
                }
            }
        }
    }

    &.inactive-filled {
        &:hover {
            .input-clear,
            .trash-can-svg,
            .input-pen-container,
            .input-dropdown-arrow,
            .input-icon,
            .input-password-eye,
            app-ca-input-password,
            app-ca-input-placeholder-icon,
            app-ca-input-clear {
                display: inline-block;
                transition: 0.3s ease-in-out;

                &:hover ~ .input-control {
                    background-color: $inactive-filled-input;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $inactive-filled-input;
                }
            }
        }
    }

    &.inactive-empty {
        &:hover {
            .input-clear,
            .input-pen-container,
            .input-dropdown-arrow,
            .input-icon,
            .input-password-eye,
            app-ca-input-password,
            app-ca-input-placeholder-icon,
            app-ca-input-clear {
                display: inline-block;
                transition: 0.3s ease-in-out;

                &:hover ~ .input-control {
                    background-color: $inactive-empty-input;
                }

                &:before:hover,
                &:after:hover ~ .input-control {
                    background-color: $inactive-empty-input;
                }
            }
        }
    }

    //--------------- end ---------------
    @import './scss/ca-input.label.scss';
    @import './scss/ca-input.input.scss';
    @import './scss/ca-input.requiredcheck.scss';
    @import './scss/ca-input.clear.scss';
    @import './scss/ca-input.placeholdericon.scss';
    @import './scss/ca-input.dropdown.scss';
    @import './scss/ca-input.error.scss';
    @import './scss/ca-input.passwordeye.scss';
    @import './scss/ca-input.datepicker.scss';
    @import './scss/ca-input.placeholderText.scss';
    @import './scss/ca-input.dangermark.scss';
    @import './scss/ca-input.passwordcapslock.scss';
    @import './scss/ca-input.commands.scss';
    @import './scss/ca-input.labelcounter.scss';
    @import './scss/ca-input.spinner.scss';
    @import './scss/ca-input.editlabel.scss';
    @import './scss/ca-dropdown-input-image.scss';
    @import './scss/ca-input.placeholdericon-rightside.scss';
}

.input-fixed-placehoder {
    &-label {
        color: $default-placeholderIcon;
        position: absolute;
        right: 0;
        font-size: 14px;
        top: 3px;
    }

    &-input {
        padding-right: 25px !important;
    }
}

.input-border-radius {
    border-radius: 8px !important;
}

.hide-input-value {
    text-indent: -9999px;
}

.payroll-deduction-truck-svg {
    line-height: 16px;
    svg {
        width: 46px;
        height: 16px;
    }
}

.payroll-deduction-truck {
    display: grid !important;
    grid-template-columns: 305px 92px !important;
}