@use "../base/mixins" as *;
@use "../base/variables" as *;
@use "../base/typography" as *;

.textarea {
  padding: 0.8rem 0 1.1rem 1.12rem;
  height: 4.6rem;
  background-color: transparent;
  border: none;
  resize: none;
  color: theme-color($text-high);
  border: 1px solid transparent;

  @include media("lg") {
    padding: 1rem 1.2rem;
    height: 3.8rem;
  }

  &::placeholder {
    color: theme-color($text-low);
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

// Text input (기본 + size variants)
@include input-variant(
  $name: "text",
  $color: theme-color($text-high),
  $hover-line: theme-color($primary),
  $focus-line: theme-color($primary),
  $active-line: theme-color($primary)
);

// Modifier: 아이콘과 함께 사용
.input-icon {
  padding-left: 4.4rem;

  @include media("lg") {
    padding-left: 4rem;
  }
}

[class*="input-"][readonly] {
  [data-theme="dark"] & {
    color: rgba(#fff, 0.24);
  }

  [data-theme="light"] & {
    color: #999;
  }
}

.input-shake {
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.error-enter-active,
.error-leave-active {
  @include transition((opacity, max-height, transform));
}

.error-enter-from,
.error-leave-to {
  opacity: 0;
  max-height: 0;
  translate: 0 -10px;
}

.error-enter-to,
.error-leave-from {
  opacity: 1;
  max-height: 10rem;
  translate: 0 0;
}