input.floatingLabel-input:focus {
  @apply pb-12;
}

.floatingLabel-label {
  @apply absolute text-grey-4 top-0;
  @apply left-floatingLabel transition duration-200;
  @apply pointer-events-none;
}

input.floatingLabel-input:focus ~ .floatingLabel-label {
  @apply text-teal;
}

.floatingLabel-input[data-valid="false"] ~ .floatingLabel-label,
.floatingLabel-input[data-valid="false"]:focus ~ .floatingLabel-label {
  @apply text-salmon;
}

.floatingLabel-input:focus ~ .floatingLabel-label,
.floatingLabel-input:disabled ~ .floatingLabel-label,
.floatingLabel-input:required:valid ~ .floatingLabel-label,
.floatingLabel-input:optional:not(:placeholder-shown) ~ .floatingLabel-label {
  @apply text-xs -top-floatingLabel;
}

.clearButton-container > .floatingLabel > .floatingLabel-label {
  top: 16px;
}

.clearButton-container
  > .floatingLabel
  > .floatingLabel-input:required:valid
  ~ .floatingLabel-label,
.clearButton-container
  > .floatingLabel
  > .floatingLabel-input:optional:not(:placeholder-shown)
  ~ .floatingLabel-label,
.clearButton-container
  > .floatingLabel
  > .floatingLabel-input:disabled
  ~ .floatingLabel-label,
.clearButton-container
  > .floatingLabel
  > .floatingLabel-input:focus
  ~ .floatingLabel-label {
  top: 3px;
}

input::-webkit-input-placeholder {
  opacity: 1;
}

input:placeholder-shown {
  @apply text-grey-4;
}