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

.datetime-picker-main-holder {
    position: relative;

    &.transparent {
        background-color: transparent;

        ::ng-deep {
            .input-custom-group .input-control.inactive-filled {
                background-color: transparent;
            }
        }
    }

    &.input-custom-group {
        &.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;
                    }
                }
            }
        }

        // DateTime
        &.datetimeclass {
            border-radius: 2px !important;

            &:not(.invalid-focus-out-filled),
            &:not(.valid-focus-in),
            &:not(.valid-focus-out),
            &:not(.valid-focus-out-filled),
            &:not(.invalid-focus-in),
            &:not(.invalid-focus-out-empty) {
                &:not(.transparent) {
                    background-color: $default-input;

                    &:hover {
                        background-color: $default-on-input-hover;
                    }
                }
            }

            &.invalid-empty-focus-out:not(.transparent) {
                background-color: $invalid-input;

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

            &.valid-focus-out:not(.transparent) {
                background-color: $valid-input;

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

            &.inactive-empty {
                &:not(.transparent) {
                    background-color: $inactive-empty-input;
                }

                pointer-events: none;
            }

            &.inactive-filled {
                &:not(.transparent) {
                    background-color: $inactive-filled-input;
                }

                pointer-events: none;

                .date_time_holder {
                    opacity: 0.5;
                }
            }

            // DateTime Dark
            &.dark {
                &:not(.invalid-focus-out-filled),
                &:not(.valid-focus-in),
                &:not(.valid-focus-out),
                &:not(.valid-focus-out-filled),
                &:not(.invalid-focus-in),
                &:not(.invalid-focus-out-empty) {
                    &:not(.transparent) {
                        background-color: $datetime-dark-default;

                        &:hover {
                            background-color: $default-removed-background-text;
                        }
                    }
                }

                &.valid-focus-out-filled:not(.transparent) {
                    background-color: red;

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

                &.inactive-empty:not(.transparent) {
                    background-color: $inactive-empty-input;
                }

                &.inactive-filled:not(.transparent) {
                    background-color: $inactive-filled-input;
                }
            }
        }
    }
}

.date_time_holder {
    .main {
        pointer-events: none !important;
    }
}