.status-indicator-with-icon {
  // default layout is horizontal
  &__value {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;

    .icon {
      margin-right: $pad-xsmall;
    }

    span {
      white-space: nowrap;
    }
  }

  // overrides for different layout
  &__value-vertical {
    flex-direction: column;
    gap: $pad-xsmall;
  }

  .indicator-tip-text {
    text-align: center;
  }
}