.label {
  color: var(--Text-Interactive-Placeholder);
  font-family: "fira sans";
  font-weight: 400;
  letter-spacing: 0.03px;
  line-height: 120%;
  text-align: left;
  transition: font-size 100ms ease;
  user-select: none;
}

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

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

span.discreet {
  color: var(--Text-Interactive-Default);
  font-weight: 500;
  order: unset;
}

span.required:after {
  content: " *";
}

/* Handle input and textarea fields */
input:focus ~ .label,
input:placeholder-shown ~ .label,
input[value]:not([value=""]) ~ .label,
textarea:focus ~ .label textarea:placeholder-shown ~ .label,
textarea[value]:not([value=""]) ~ .label {
  font-size: 12px;
  margin-bottom: var(--Space-x05);
}

input:disabled ~ .label,
textarea:disabled ~ .label,
:global(.select-container)[data-disabled] .label {
  color: var(--Text-Interactive-Disabled);
}

/* Handle select fields */
:global(.select-button) .label {
  order: unset;
}

:global(.select-container)[data-open="true"] .label:not(.discreet),
:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
  font-size: 12px;
  margin-bottom: var(--Space-x05);
}