.b-input {
  position: relative;

  &.b-input-small {
    height: 24px;

    input {
      font-size: 12px;
      text-indent: 10px;

      &::placeholder {
        font-size: 12px;
      }
    }
  }

  &.b-input-middle {
    height: 32px;

    input {
      font-size: 14px;
      text-indent: 12px;

      &::placeholder {
        font-size: 13px;
      }
    }
  }

  &.b-input-default {
    height: 40px;

    input {
      font-size: 16px;
      text-indent: 14px;

      &::placeholder {
        font-size: 14px;
      }
    }
  }

  &.b-input-large {
    height: 48px;

    input {
      font-size: 16px;
      text-indent: 16px;

      &::placeholder {
        font-size: 15px;
      }
    }
  }

  &.b-input-huge {
    height: 60px;

    input {
      font-size: 20px;
      text-indent: 16px;

      &::placeholder {
        font-size: 16px;
      }
    }
  }

  input {
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    line-height: 100%;
    background: rgba(245, 247, 251, 0.9);
    //font-family: Montserrat-SemiBold, serif;
    //font-size: 14px;
    color: #242934;
    border-radius: 4px;
    transition: background 1s;
    letter-spacing: 1px;
    //outline: none;

    &.b-input-block {
      width: 100% !important;
    }

    &:hover, &:active {
      background: #F5F7FB;
    }

    &:active {
      outline: none;
    }

    &::-webkit-input-placeholder { /* WebKit browsers */
      color: #999;
      font-size: 14px;
      font-weight: 400;
    }

    &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #999;
      font-size: 14px;
      font-weight: 400;
    }

    &:-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #999;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .__eye {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -12px;
    cursor: pointer;

    .__open {
      display: block;
      height: 24px;
      width: 24px;
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjOUNBNkI5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiA1YzMuMzYyIDAgNi40MzQgMS45NDYgOS4yMTUgNS44MzdhMiAyIDAgMCAxIDAgMi4zMjZsLS4yNTQuMzQ4QzE4LjI0NyAxNy4xNzEgMTUuMjYxIDE5IDEyIDE5Yy0zLjM2MiAwLTYuNDM0LTEuOTQ2LTkuMjE1LTUuODM3YTIgMiAwIDAgMSAwLTIuMzI2bC4yNTQtLjM0OEM1Ljc1MyA2LjgyOSA4LjczOSA1IDEyIDV6bTAgM2E0IDQgMCAxIDAgMCA4IDQgNCAwIDAgMCAwLTh6bTAgMS42YTIuNCAyLjQgMCAxIDEgMCA0LjggMi40IDIuNCAwIDAgMSAwLTQuOHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIyIi8+PC9nPjwvc3ZnPg==") no-repeat center center;
      background-size: 24px 24px;
    }

    .__close {
      display: block;
      height: 24px;
      width: 24px;
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiM5Q0E2QjkiIHN0cm9rZS13aWR0aD0iMS42IiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zLjAxOCA4LjAyM2M0LjQ3NCA0Ljk3IDEyLjEzIDUuMzc0IDE3LjEuOS4zMTYtLjI4NC42MTYtLjU4NC45LS45TTUuNTUzIDEwLjg4OWwtMi41MzUgMi45MjJNMTguOCAxMC42OTVsMi41NzcgMy4xMTZNMTAuMTIzIDEyLjQ4NGwtMS4yNjYgMy4xNDdNMTQuNzUxIDEyLjM3M2wxLjMxNiAzLjI1OCIvPjwvZz48L3N2Zz4=") no-repeat center center;
      background-size: 24px 24px;
    }
  }
}