$size: 16px;
$label-color: rgba(#020c12, 0.58);
$error: #c10525;

// display: flex;
//   flex-direction: column;
//   &-Input {
//     background: #e5edf5;
//     border-radius: 4px 4px 0 0;
//     background-blend-mode: multiply;
//     border: none;
//     border-bottom: 1px solid rgba(1, 72, 116, 0.18);
//     padding: 8px;
//     box-sizing: border-box;
//     transition: 0.1s;
//     height: 40px;
//     &:focus {
//       transition: 0.1s;
//       outline: none;
//       background-color: white;
//       box-shadow: inset 0 0 2px rgba(15, 104, 160, 0.87);
//       border-color: #1487cf;
//     }
//   }

.input {
  display: block;
  position: relative;

  &__label {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    display: inline-block;
    cursor: pointer;
    font-size: $size * 0.75;
    line-height: $size;
    margin-bottom: 0.25 * $size;
    font-weight: 600;
    color: $label-color;
    transition: 0.3s;
  }

  &__wrapper {
    position: relative;
  }

  &__icon {
    width: $size * 1.5;
    left: $size * 0.25;
    top: $size * 0.25;
    bottom: $size * 0.25;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;

    * {
      width: 100%;
      display: block;
      overflow: hidden;
    }
  }

  &__append {
    width: $size * 1.5;
    right: $size * 0.25;
    top: $size * 0.25;
    bottom: $size * 0.25;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;

    * {
      width: 100%;
      display: block;
      overflow: hidden;
    }
  }

  &__input {
    display: block;
    width: 100%;
    font-size: $size * (14 / 16);
    line-height: $size;
    // background: rgba(#f2f8fd, 0.75);
    background-blend-mode: multiply;
    border: none;
    border-bottom-width: $size * 0.0625;
    border-bottom-color: rgba(#014874, 0.18);
    box-sizing: border-box;
    padding: $size * 0.5;
    transition: 0.1s;

    background: #e5edf5;
    border-radius: 4px 4px 0 0;
    min-height: $size * 2.5;
    
    &._with-icon {
      padding-left: $size * 2;
    }

    &:focus {
      transition: 0.1s;
      outline: none;
      background-color: white;
      box-shadow: inset 0 0 $size * 0.125 rgba(15, 104, 160, 0.87);
      border-color: #1487cf;
    }
  }

  &__error {
    position: absolute;
    top: calc(100% + #{$size} * 0.125);
    font-size: $size * 0.75;
    color: $error;
  }

  &._invalid {
    .input {
      &__label {
        color: $error;
      }

      &__input {
        border-color: $error;
      }
    }
  }
}
