:host {
  /**
   * @prop --color: Text color of the badge
   */
  display: block;
  color: var(--color);
  font-family: var(--bkkr-font-family);
  font-size: 80%;
  font-weight: 400;
  line-height: 1.2;
  contain: content;
  vertical-align: baseline;
}

:host-context(.item-interactive.state-invalid.state-touched):host(.note-animated) {
  animation: shake 0.5s cubic-bezier(0.25, 0.25, 0.25, 1) 0.1s forwards;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
:host(.bkkr-color) {
  --color: var(--color-base, var(--color-primary, #3880ff));
}

@media (prefers-reduced-motion: reduce) {
  :host(.note-animated) {
    animation: unset;
  }
}