/* Container */
.input {
  /* this is needed for label-positioning */
  position: relative;

  /* padding properties */
  --horizontal-padding: 16px;
  --vertical-padding: 14px;

  /* this can be adjusted */
  --container-margin: 10px;
  height: 56px;
  width: calc(100% - (2 * var(--container-margin)));
  max-width: 220px;
  margin: var(--container-margin);
  font-family: "Arial";
}

/* Input field */
div.input > input {
  /* input fills the whole size of the div */
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  /* Space around the text; Subtract border size because border-box-sizing is used. */
  padding: calc(var(--vertical-padding) - var(--input-border-size))
    calc(var(--horizontal-padding) - var(--input-border-size));

  /* border */
  --input-border-size: 1.2px;
  border: var(--input-border-size) solid rgba(0, 0, 0, 0.28);
  border-radius: 7px;
  transition: border 0.2s;

  /* font */
  font-size: 17px;
}

div.input > input:hover {
  /* darker and thicker border on hover */
  --input-border-size: 1.6px;
  border-color: rgba(0, 0, 0, 0.445);
}

div.input > input:focus {
  /* colored border on focus, instead of outline */
  --input-border-size: 2.3px;
  border-color: var(--primary-color);
  outline: 0;
}

/* define the different primary colors */
div.input, /* use green as default color */
div.input.green {
  --primary-color: #0b6;
}
div.input.blue {
  --primary-color: #06b;
}
div.input.red {
  --primary-color: #b02;
}
div.input.yellow {
  --primary-color: #fc1;
}
div.input.orange {
  --primary-color: #f62;
}
div.input.purple {
  --primary-color: #60e;
}

/* The label describing the input field */
div.input > label {
  /* position the label in the center of the input field */
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  /* 
     * Subtract the current label-border-size from the input padding, so that the 
     * resulting space between the container border and the label text is the same 
     * as between the container border and the input text.
     */
  left: calc(var(--horizontal-padding) - var(--label-border-size));

  /* bring it to the top but without being target of mouse events */
  z-index: 100;
  pointer-events: none;

  /* handle labels with much text */
  max-width: calc(100% - (2 * var(--horizontal-padding)));
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;

  /* 
     * This space will get replaced by the border when 
     * the input is in focus, but is needed also here so the 
     * left-value is correct.
     */
  --label-border-size: 5px;
  padding-left: var(--label-border-size);

  /* smooth transition to the top */
  transition-property: color, top, font;
  transition-duration: 0.32s;

  /* white background to hide the border behind the text */
  background: white;

  /* styling the text */
  color: rgba(0, 0, 0, 0.54);
  font-size: 17px;
}

div.input > label:focus {
  /* remove outline */
  outline: 0;
}

div.input > input:focus ~ label,
div.input > input:valid ~ label {
  /* new position at the top */
  top: calc(2.3px / 2);
  transform: translate(0%, -50%);

  /*
     * Remove the padding and use borders instead, 
     * since text can overlap paddings, but not borders.
     */
  padding: 0;
  border-left: var(--label-border-size) solid transparent;
  border-right: var(--label-border-size) solid transparent;

  /* decrease the font size */
  font-size: 13px;
}

div.input > input:hover ~ label {
  /* darker text onHover */
  color: rgba(0, 0, 0, 0.76);
}

div.input > input:focus ~ label {
  /* colored text on focus */
  color: var(--primary-color) !important;
}