@ozen-ui/kit/__inner__/esm/components/FieldLabel/FieldLabel.css

React component library

.FieldLabel {
  font: var(--field-label-font);
  color: var(--color-content-secondary);
  transition:
    transform var(--transition-default),
    font var(--transition-default);
  position: absolute;
  box-sizing: border-box;
  inset-block-start: var(--field-label-top);
  inset-inline-start: 0;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: var(--z-index-absolute);
  pointer-events: none;
}

  .FieldLabel_filled,
  .FieldLabel_focused,
  .FieldLabel_shrink {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transform-origin: 0;
    font: var(--field-label-scaled);
    transform: translateY(var(--field-label-translate_y)) scale(1);
  }

  .FieldLabel_shrink.FieldLabel_size_2xs,
  .FieldLabel_filled.FieldLabel_size_2xs,
  .FieldLabel_focused.FieldLabel_size_2xs {
    opacity: 0;
    display: none;
  }

  .FieldLabel_size_2xs {
      --field-label-font: var(--typography-text-2xs-font);
      --field-label-scaled: var(--typography-text-2xs-font);
      --field-label-top: 8px;
    }

  .FieldLabel_size_xs {
      --field-label-font: var(--typography-text-xs-font);
      --field-label-scaled: var(--typography-text-3xs-font);
      --field-label-translate_y: -8px;
      --field-label-top: 12px;
    }

  .FieldLabel_size_s {
      --field-label-font: var(--typography-text-s-font);
      --field-label-scaled: var(--typography-text-3xs-font);
      --field-label-translate_y: -8px;
      --field-label-top: 14px;
    }

  .FieldLabel_size_m {
      --field-label-font: var(--typography-text-m-font);
      --field-label-scaled: var(--typography-text-xs-font);
      --field-label-translate_y: -8px;
      --field-label-top: 16px;
    }

  .FieldLabel_size_l {
      --field-label-font: var(--typography-text-l-font);
      --field-label-scaled: var(--typography-text-s-font);
      --field-label-translate_y: -10px;
      --field-label-top: 18px;
    }

  .FieldLabel_disabled {
    color: var(--color-content-tertiary);
  }

  .FieldLabel sup {
    inset-block-start: -0.5em;
    color: var(--color-content-error);
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }