.statsCard {
  --borderRadius: var(--borderRadius--none);

  position: relative;

  display: flex;
  flex-wrap: wrap;

  padding: var(--padding--lg);

  border: 1px solid rgb(var(--border--neutral-low-default--light));
  border-radius: var(--borderRadius);

  @media @screen-xl {
    padding-top: 20px;
  }
}

.statsCard__flexRow {
  display: flex;
  gap: var(--gap--sm);
  align-items: center;
  width: 100%;
}

.statsCard__icon {
  position: absolute;
  top: 0;
  left: 10px;
  transform: translateY(-50%);

  padding: 0 8px;

  line-height: 1;

  background: white;

  // This is needed for smarty component only
  @media @screen-xl {
    & > .icon--md {
      width: 32px;
      height: 32px;

      &::before {
        font-size: 32px;
      }
    }
  }
}

.statsCard__title {
  width: 100%;
  margin: 0;
  font-size: var(--fontSize--body-large);
  color: rgb(var(--foreground--neutral-full-default--light));
}

.statsCard__description {
  margin: 0;
  color: rgb(var(--foreground--neutral-high-default--light));
}

.statsCard__value {
  width: 100%;
  margin-top: var(--margin--xs);
  margin-bottom: var(--margin--xs);

  font-size: var(--fontSize--headline-h3);
  line-height: var(--lineHeight--headline-h3);
  color: rgb(var(--foreground--blue-medium-default--light));

  @media @screen-xl {
    font-size: var(--fontSize--headline-h2);
    line-height: var(--lineHeight--headline-h2);
  }
}