.label {
  color: var(--UI-Grey-60);
  font-family: "fira sans";
  font-weight: 400;
  letter-spacing: 0.03px;
  line-height: 120%;
  text-align: left;
  transition: font-size 100ms ease;
}

span.small {
  display: block;
  font-size: 12px;
}

span.regular {
  font-size: 16px;
  order: 1;
}

span.discreet {
  color: var(--Base-Text-High-contrast);
  font-weight: 500;
  order: unset;
}

input:active ~ .label,
input:not(:placeholder-shown) ~ .label {
  display: block;
  font-size: 12px;
}

input:focus ~ .label {
  font-size: 12px;
}

input:placeholder-shown ~ .label {
  grid-row: 1/-1;
}

input:placeholder-shown:focus ~ .label,
input:placeholder-shown:active ~ .label {
  margin-bottom: var(--Spacing-x-half);
}

input:disabled ~ .label {
  color: var(--Main-Grey-40);
}

textarea:active ~ .label,
textarea:not(:placeholder-shown) ~ .label {
  display: block;
  font-size: 12px;
}

textarea:focus ~ .label {
  font-size: 12px;
}

textarea:placeholder-shown ~ .label {
  grid-row: 1/-1;
}

textarea:placeholder-shown:focus ~ .label,
textarea:placeholder-shown:active ~ .label {
  margin-bottom: var(--Spacing-x-half);
}

textarea:disabled ~ .label {
  color: var(--Main-Grey-40);
}