.label {
  composes: Body-Paragraph-mdRegular from '../Typography/typography.module.css';
  transition: font-size 100ms ease;
  text-align: left;
  color: var(--Text-Interactive-Placeholder);
  user-select: none;

  &.small {
    display: block;
    font-size: 12px;
  }
  &.regular {
    font-size: 16px;
  }
}

.discreet {
  composes: Body-Supporting-text-caption-smBold from '../Typography/typography.module.css';
  color: var(--Text-Default);
  order: unset;
}

.required:after {
  content: ' *';
}

input:focus,
input:placeholder-shown,
input[value]:not([value='']),
textarea:focus,
textarea:placeholder-shown,
textarea[value]:not([value='']) {
  & ~ .label {
    font-size: 12px;
    margin-bottom: var(--Space-x05);
  }
}

input:disabled,
textarea:disabled {
  & ~ .label {
    color: var(--Text-Interactive-Disabled);
  }
}

@media (hover: hover) {
  input:active:not(:disabled) ~ .label {
    font-size: 12px;
    margin-bottom: var(--Space-x05);
  }
}