.l-md-input {
  --l-input-width: 180px;
  position: relative;
  width: var(--l-input-width, 180px);
  height: var(--l-form-control-height, 32px);
  display: inline-block;
}

.l-md-input__inner {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  border-style: solid;
  border-color: #c0c0c0;
  border-bottom-width: 1px;
  box-sizing: border-box;
  outline: none;
  transition: all 0.3s ease-in-out;
}
.l-md-input__label {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
  color: #8c8c8c;
  cursor: text;
  line-height: 1;
  transform: translateY(-50%);
  font-size: 13px;
}
.l-md-input__inner:focus {
  border-bottom-width: 2px;
  border-color: var(--l-primary-color, #52c41a);
}
.l-md-input.l-has-value .l-md-input__label,
.l-md-input.l-focused .l-md-input__label {
  transform: translateY(-150%);
  font-size: 12px;
}
.l-md-input.l-focused .l-md-input__label {
  color: var(--l-primary-color, #52c41a);
}

/* 四周边框 */
.l-md-input-outline .l-md-input__inner {
  border-width: 1px;
  border-radius: 4px;
  padding: 0 10px;
}
.l-md-input-outline .l-md-input__label {
  left: 10px;
}
.l-md-input-outline .l-md-input__inner:focus {
  border-width: 2px;
}
.l-md-input-outline.l-focused .l-md-input__label,
.l-md-input-outline.l-has-value .l-md-input__label {
  padding-left: 4px;
  padding-right: 4px;
  background-color: #ffffff;
}