material-components_material-web/field/lib/_label.scss

//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

@mixin styles() {
  .label {
    color: var(--_label-text-color);
    overflow: hidden;
    max-width: 100%;
    // The resting label at 100% height can block pointer events to the content
    // if it's very long and spans the full width of the field. Additionally,
    // selecting the label's text doesn't present a good UX, since the user
    // selection should be re-focused to another element (such as the input)
    // upon focusing. Finally, since the actual label elements are swapped, it
    // is not easy to maintain the user's label text selection.
    pointer-events: none;
    // TODO: Check with design, should there be any transition from resting to
    // floating when there is a mismatch between ellipsis, such as opacity
    // transition?
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    font: var(--_label-text-type);
  }

  .label.resting {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .label.floating {
    font-size: var(--_label-text-populated-size);
    line-height: var(--_label-text-populated-line-height);
    transform-origin: top left;
  }

  .label.hidden {
    opacity: 0;
  }

  .no-label .label {
    display: none;
  }

  :hover .label {
    color: var(--_hover-label-text-color);
  }

  .focused .label {
    color: var(--_focus-label-text-color);
  }

  .disabled .label {
    color: var(--_disabled-label-text-color);
  }

  .disabled .label:not(.hidden) {
    opacity: var(--_disabled-label-text-opacity);
  }

  .error .label {
    color: var(--_error-label-text-color);
  }

  .error:hover .label {
    color: var(--_error-hover-label-text-color);
  }

  .error.focused .label {
    color: var(--_error-focus-label-text-color);
  }
}