.Input {
  height: var(--spacing-400);
  line-height: var(--spacing-400);
  padding-left: var(--spacing-100);
  font-size: var(--fontSize-300);
  border-radius: var(--borderRadius-200);
  border: none;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--gray400);
  width: 100%;
  transition-property: box-shadow;
  transition-duration: var(--transitionDuration-200);
  transition-timing-function: linear;
}

/* Placeholder */

.Input::-webkit-input-placeholder {
  color: var(--gray500);
  opacity:  1;
}
.Input::-moz-placeholder {
  color: var(--gray500);
  opacity:  1;
}
.Input:-ms-input-placeholder {
  color: var(--gray500);
  opacity:  1;
}

/* Pseudo states */

.Input:hover {
  box-shadow: inset 0 0 0 1px var(--gray500);
}

.Input:focus {
  box-shadow: inset 0 0 0 1px var(--blue500);
}

.Input:focus ~ .FormGroup-label {
  color: var(--blue500);
}

/* Sizes */

.Input.size1 {
  height: var(--spacing-300);
  line-height: var(--spacing-300);
  padding-left: var(--spacing-100);
}

.Input.size3 {
  font-size: var(--fontSize-400);
  height: var(--spacing-600);
  padding-left: var(--spacing-200);
}

@media (--breakpoint-1) {
  .Input.bp1-size1 {
    height: var(--spacing-300);
    line-height: var(--spacing-300);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp1-size2 {
    height: var(--spacing-400);
    line-height: var(--spacing-400);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp1-size3 {
    font-size: var(--fontSize-400);
    height: var(--spacing-600);
    line-height: var(--spacing-600);
    padding-left: var(--spacing-200);
  }
}

@media (--breakpoint-2) {
  .Input.bp2-size1 {
    height: var(--spacing-300);
    line-height: var(--spacing-300);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp2-size2 {
    height: var(--spacing-400);
    line-height: var(--spacing-400);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp2-size3 {
    font-size: var(--fontSize-400);
    height: var(--spacing-600);
    line-height: var(--spacing-600);
    padding-left: var(--spacing-200);
  }
}

@media (--breakpoint-3) {
  .Input.bp3-size1 {
    height: var(--spacing-300);
    line-height: var(--spacing-300);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp3-size2 {
    height: var(--spacing-400);
    line-height: var(--spacing-400);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp3-size3 {
    font-size: var(--fontSize-400);
    height: var(--spacing-600);
    line-height: var(--spacing-600);
    padding-left: var(--spacing-200);
  }
}

@media (--breakpoint-4) {
  .Input.bp4-size1 {
    height: var(--spacing-300);
    line-height: var(--spacing-300);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp4-size2 {
    height: var(--spacing-400);
    line-height: var(--spacing-400);
    padding-left: var(--spacing-100);
    font-size: var(--fontSize-300);
  }

  .Input.bp4-size3 {
    font-size: var(--fontSize-400);
    height: var(--spacing-600);
    line-height: var(--spacing-600);
    padding-left: var(--spacing-200);
  }
}

/* Alignment */

.Input.left {
  border-radius: var(--borderRadius-200) 0 0 var(--borderRadius-200);
  z-index: 2;
}

.Input.middle {
  border-radius: 0;
  margin-left: -1px;
  z-index: 1;
}

.Input.right {
  border-radius: 0 var(--borderRadius-200) var(--borderRadius-200) 0;
  margin-left: -1px;
  z-index: 0;
}

.Input.left:hover,
.Input.middle:hover,
.Input.right:hover,
.Input.left:focus,
.Input.middle:focus,
.Input.right:focus {
  z-index: 3;
}

/* Valid */

.FormGroup.valid .FormGroup-label {
  color: var(--green700);
}

.FormGroup.valid .Input {
  box-shadow: inset 0 0 0 1px var(--green700);
}

/* Invalid */

.FormGroup.invalid .FormGroup-label {
  color: var(--red700);
}

.FormGroup.invalid .Input {
  box-shadow: inset 0 0 0 1px var(--red700);
}

.FormGroup.invalid .FormGroup-hint {
  color: var(--red700);
}