@value ( varTextDisabled ) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value ( var-sp-down-4, var-sp-down-2, var-sp-down-1 ) from "~@xo-union/tk-css-spacing/lib/variables.css";
@value horizontal-spacing: calc(var-sp-down-4 + var-sp-down-2);
@value (var-in-mobile) from "~@xo-union/tk-ui-breakpoints/lib/variables.css";
@value (varFontSize100, varLineHeight100, varFontSize200, varLineHeight200, varFontSize300, varLineHeight300, varFontSize400, varLineHeight400, varFontSize450, varLineHeight450, varFontSize500, varLineHeight500, varFontSize600, varLineHeight600, varFontSize700, varLineHeight700, varFontSize800, varLineHeight800, varFontSize900, varLineHeight900, var-hero-xl-letter-spacing, var-hero-xl-font-weight, var-hero-xl-font-family, var-hero-xl-font-size, var-hero-xl-line-height, var-hero-lg-letter-spacing, var-hero-lg-font-weight, var-hero-lg-font-family, var-hero-lg-font-size, var-hero-lg-line-height, var-hero-md-letter-spacing, var-hero-md-font-weight, var-hero-md-font-family, var-hero-md-font-size, var-hero-md-line-height, var-hero-sm-letter-spacing, var-hero-sm-font-weight, var-hero-sm-font-family, var-hero-sm-font-size, var-hero-sm-line-height, var-h1-font-weight, var-h1-font-family, var-h1-font-size, var-h1-line-height, var-h2-font-weight, var-h2-font-family, var-h2-font-size, var-h2-line-height, var-h3-letter-spacing, var-h3-font-weight, var-h3-font-family, var-h3-font-size, var-h3-line-height, var-h4-letter-spacing, var-h4-font-weight, var-h4-font-family, var-h4-font-size, var-h4-line-height, var-subhead-letter-spacing, var-subhead-font-family, var-subhead-font-size, var-subhead-line-height, var-editorial-letter-spacing, var-editorial-font-family, var-editorial-font-size, var-editorial-line-height, var-body1-letter-spacing, var-body1-font-family, var-body1-font-size, var-body1-line-height, var-body2-letter-spacing, var-body2-font-family, var-body2-font-size, var-body2-line-height, var-buttonL-letter-spacing, var-buttonL-font-weight, var-buttonL-font-family, var-buttonL-font-size, var-buttonL-line-height, var-buttonM-letter-spacing, var-buttonM-font-weight, var-buttonM-font-family, var-buttonM-font-size, var-buttonM-line-height, var-overline-letter-spacing, var-overline-text-transform, var-overline-font-weight, var-overline-font-family, var-overline-font-size, var-overline-line-height, var-caption-lg-letter-spacing, var-caption-lg-font-weight, var-caption-lg-font-family, var-caption-lg-font-size, var-caption-lg-line-height, var-caption-sm-letter-spacing, var-caption-sm-font-weight, var-caption-sm-font-family, var-caption-sm-font-size, var-caption-sm-line-height, var-mobile-hero-xl-font-size, var-mobile-hero-xl-line-height, var-mobile-hero-lg-font-size, var-mobile-hero-lg-line-height, var-mobile-hero-md-font-size, var-mobile-hero-md-line-height, var-mobile-hero-sm-font-size, var-mobile-hero-sm-line-height, var-mobile-h1-font-size, var-mobile-h1-line-height, var-mobile-h2-font-size, var-mobile-h2-line-height, var-mobile-h3-font-size, var-mobile-h3-line-height, var-mobile-h4-font-size, var-mobile-h4-line-height, var-mobile-subhead-font-size, var-mobile-subhead-line-height ) from "~@xo-union/tk-ui-typography/lib/variables.css";
.input-with-animated-label:not([type=button]):focus ~ .animated-label, .input-with-animated-label[data-has-value] ~ .animated-label {
  letter-spacing: var-caption-lg-letter-spacing;
  font-weight: var-caption-lg-font-weight;
  font-family: var-caption-lg-font-family;
  font-size: var-caption-lg-font-size;
  line-height: var-caption-lg-line-height;
}

@value ( var-sp-down-3 ) from "~@xo-union/tk-css-spacing/lib/variables.css";
.animated-label {
  composes: ease-out from "./animation.css";
  composes: label from "./label.css";
  composes: body1 from "~@xo-union/tk-ui-typography/lib/font-scale-categories.css";
  padding-left: horizontal-spacing;
  padding-top: var-sp-down-1;
  transition-property: font-size, padding;
}

.input-with-animated-label[data-has-value] ~ .animated-label {
  padding-top: var-sp-down-3;
}
.input-with-animated-label:disabled ~ .animated-label {
  background-color: transparent;
  color: varTextDisabled;
  cursor: not-allowed;
}
.input-with-animated-label:not([type=button]):focus ~ .animated-label {
  padding-top: var-sp-down-3;
}