@import './mixins';

.Label {
  @include label;
}

// Floating label variation
.FormGroup--floatingLabel .Label {
  position: absolute;
  top: ($form-field-height-base * 0.5) - ($font-size-root * 0.5);
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0 $label-floating-padding-horizontal;
  text-transform: none;
  font-size: $label-floating-font-size;
  color: $label-floating-color;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  will-change: font-size, transform;
  transition: 200ms all cubic-bezier(0.4, 0, 0.2, 1);
}

.FormGroup--floatingLabel {
  &.is-focused .Label,
  &.has-value .Label,
  .Input:focus + .Label,
  .Select:focus + .Label,
  .Textarea:focus + .Label,
  .Autocomplete.is-searching + .Label {
    font-size: $label-floating-font-size-focus;
    transform: translateY(-10px);
  }
}

// Prefixed or Suffixed Fields
.FormGroup--floatingLabel.FormGroup--hasSuffix .Label,
.FormGroup--floatingLabel.FormGroup--hasPrefix .Label {
  width: calc(100% - #{$label-floating-symbol-width});
}

.FormGroup--floatingLabel.FormGroup--hasPrefix .Label {
  position: absolute;
  left: $label-floating-symbol-width;
}

.FormGroup--floatingLabel.FormGroup--hasSuffix.FormGroup--hasPrefix .Label {
  width: calc(
    100% - #{$label-floating-symbol-width * 2} - #{$label-floating-padding-horizontal *
      2}
  );
}