@use "../../abstracts" as *;

.art-input-wrapper {
  display: flex;
  flex-direction: column;
  label {
    color: $neutral-400;
    font-size: 0.8rem;
  }
  .art-input {
    margin-top: 4px;
    border: 1px solid $neutral-150;
    min-width : 22ch;
    display: flex;
    align-items: center;
    padding: 0rem 0.6rem;
    color: $neutral-300;
    background-color: $neutral-0;
    &:hover {
      border: 1px solid $primary-500;
    }

    &:focus-within {
      border: 1px solid $primary-700;
      outline: 1px solid $primary-700;
      box-shadow: 0px 4px 10px $neutral-100;
    }
    input {
      padding: 0.6rem 0.4rem;
      border-radius: 0.4rem;
      background-color: inherit;
      width: 100%;
      outline: none;
      border: none;
      &:focus {
        &::placeholder {
          padding-left: 0.2rem;
        }
      }
      &::placeholder {
        transition: 0.2s;
      }
    }
  }
}

.art-input-rounded {
  border-radius: 0.4rem;
}

.art-input-error {
  .art-input {
    border: 1px solid $danger-600;
    &:hover {
      border: 1px solid $danger-600;
    }

    &:focus-within {
      border: 1px solid $danger-600;
      outline: 1px solid $danger-600;
      box-shadow: 0px 4px 10px $neutral-100;
    }
  }
}
.art-input-success {
  .art-input {
    border: 1px solid $success-600;
    &:hover {
      border: 1px solid $success-600;
    }

    &:focus-within {
      border: 1px solid $success-600;
      outline: 1px solid $success-600;
      box-shadow: 0px 4px 10px $success-100;
    }
  }
}

.art-input-disabled {
  pointer-events: none;
  .art-input {
    background-color: $neutral-150;
    input {
      background-color: inherit;
    }
  }
}