@use "../../../styles/abstracts/variables";
@use "../../../styles/base/typography";
@use "../../../styles/abstracts/mixins";

.input {
  width: 100%;
  height: 100%;
  position: relative;

  &__field {
    position: relative;
    background-color: transparent;
    border: 1px solid transparent;
    width: 100%;
  }

  &__field {
    position: relative;
    background-color: transparent;
    border: 1px solid transparent;
    width: 100%;
  }

  &__label {
    position: absolute;
    width: fit-content;
    left: toRem(23px);
    top: toRem(15px);
    color: #343434;
    background-color: #FFF;
    box-shadow: 0px 0px 0px 4px #FFF;
    padding: 0px;
    display: none;

    &[data-hidelabel="true"] {
      display: block;
      top: -10px;

      color: #343434;
    }

    &-icon {
      position: absolute;
      top: 50%;
      right: 23px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
    }
  }
  & input {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: #FFF;
    padding: 1.1rem .7rem;
    border: 1px solid #e6e0e0;
    outline: none;
    transition: all 0.2s ease;
    font-family: variables.$font !important;
    font-weight: bold;
    font-size: .78rem;
    color: #1b1b1b;
    margin-top: .2rem;

    @media only screen and (max-width: 1000px) {
      padding: .95rem .7rem;
      margin-bottom: .7rem;
    }


    &:focus {
      border: 1px solid #e6e0e0;
      background-color: #FFF;
    }

    &[data-error="true"] {
      border: 1px solid rgb(205, 14, 14);
      background-color: #FFF;
    }

    &[data-success="true"] {
      border: 1px solid variables.$col-primary-btn;
      background-color: #FFF;
    }

    &:focus + .input__label {
      top: -10px;

      color: variables.$col-dark;
      width: fit-content;
      display: block;
      &[data-hidelabel="true"] {
        top: -10px;
        color: #343434;
        background-color: #FFF;
        width: fit-content;
      }
    }

    &:not(:focus) &:not(:placeholder-shown) + .input__label {
      top: -10px;

      color: #343434;
      // background-color: #FFF;
      width: fit-content;
      display: block;

      &[data-hidelabel="true"] {
        top: -10px;

        color: #343434;
        // background-color: #FFF;
        width: fit-content;
      }
    }
  }

  &__errors {
    position: absolute;
    top: 110%;
    color: rgb(205, 14, 14);
    
    //     @use body-three;
    margin-left: toRem(23px);
  }
}