.inputLabel {
  font-family:
    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  font-size: var(--Body-Paragraph-Size);
  font-weight: var(--Body-Paragraph-Font-weight);
  letter-spacing: var(--Body-Paragraph-Letter-spacing);
  text-transform: unset;
  line-height: 1.5;
  text-decoration: none;

  transition: font-size 100ms ease;
  text-align: left;
  color: var(--Text-Interactive-Placeholder);
  user-select: none;
}

.small {
  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
  font-size: var(--Label-Size);
  font-weight: var(--Label-Font-weight);
  letter-spacing: var(--Label-Letter-spacing);
  text-transform: unset;
  line-height: 1.5;
  text-decoration: none;
}

.discreet {
  font-family:
    var(--Body-Supporting-text-Font-family),
    var(--Body-Supporting-text-Font-fallback);
  font-size: var(--Body-Supporting-text-Size);
  font-weight: var(--Body-Supporting-text-Font-weight-2);
  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
  text-transform: unset;
  line-height: 1.4;
  text-decoration: none;

  color: var(--Text-Default);
  order: unset;
}

input:focus ~ .inputLabel,
input:placeholder-shown ~ .inputLabel,
input[value]:not([value='']) ~ .inputLabel,
textarea:focus ~ .inputLabel,
textarea:placeholder-shown ~ .inputLabel,
textarea[value]:not([value='']) ~ .inputLabel,
.selected {
  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
  font-size: var(--Label-Size);
  font-weight: var(--Label-Font-weight);
  letter-spacing: var(--Label-Letter-spacing);
  text-transform: unset;
  line-height: 1.5;
  text-decoration: none;

  margin-bottom: var(--Space-x025);
}

.inputLabel.disabled,
input:read-only ~ .inputLabel,
input:disabled ~ .inputLabel,
textarea:disabled ~ .inputLabel {
  color: var(--Text-Interactive-Disabled);
}

@media (hover: hover) {
  input:active:not(:disabled) ~ .inputLabel {
    font-family: var(--Label-Font-family), var(--Label-Font-fallback);
    font-size: var(--Label-Size);
    font-weight: var(--Label-Font-weight);
    letter-spacing: var(--Label-Letter-spacing);
    text-transform: unset;
    line-height: 1.5;
    text-decoration: none;

    margin-bottom: var(--Space-x025);
  }
}

/* Legacy selector for deprecated select component */
:global(.select-container)[data-disabled] .inputLabel {
  color: var(--Text-Interactive-Disabled);
}

:global(.select-button) .inputLabel {
  order: unset;
}

:global(.select-container)[data-open='true'] .inputLabel:not(.discreet),
:global(.react-aria-SelectValue):has(:nth-child(2)) .inputLabel:not(.discreet) {
  font-size: 12px;
}