/* prettier-ignore */
:host small {
  position: absolute;
  font-size: 12px;
  bottom: -16px;
  left: 12px;
  text-align: left;
  transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--bce-con2-surface);
}
:host small:before {
  content: "";
  position: absolute;
  left: -6px;
  font-weight: 100;
}

:host([disabled]) small {
  color: var(--bce-con3-surface);
}

:host([focus]) small {
  color: var(--bce-con1-surface);
}

:host([error]) bce-label {
  color: var(--bce-c500-error);
}
:host([error]) small {
  color: var(--bce-c500-error);
}

@media screen and (min-width: 1024px) {
  :host(:not([compact])[label]) small {
    left: calc(25% + 12px);
  }
}
:host {
  position: relative;
  display: block;
}