:host(us-trend) {
  display: inline-flex;
}

:host {
  & .ustrend {
    display: inline-flex;
    align-items: center;
    font: var(--text-p-s-heavy);

    /* Ensure the trend is always aligned on the baseline */
    &::before {
      content: "\2003";
      display: inline-block;
      width: 0;
    }

    &_up {
      color: var(--trend-up-text-color);
    }

    &_down {
      color: var(--trend-down-text-color);
    }

    &__icon {
      margin-right: var(--space-inline-s);
    }
  }
}