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