@import "../../../../assets/scss/main";

.input {
  &__bottomLine {
    display: flex;
    align-items: center;

    .svgIcon {
      margin-right: 4px;
    }

    &__disabled {
      .input {
        &__error, &__hint {
          color: $gray60;
          &::v-deep {
            svg {
              * {
                &[stroke] {
                  &[stroke]:not([stroke="white"]) {
                    stroke: $gray40 !important;
                  }
                }

                &[fill] {
                  &[fill]:not([fill="white"]) {
                    fill: $gray40 !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &__error, &__hint {
    margin-top: 8px;
    @include text;
  }

  &__error {
    color: $warning;
  }

  &__hint {
    color: $gray100;
  }
}

.errorTransition-enter-active {
  animation: showError 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.errorTransition-leave-active {
  animation: hideError 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}


@keyframes showError {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hideError {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-15px);
  }
}


@keyframes showHint {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}